2017 / 07 / 26 comments

Simplifying Vue.js development

Simplifying Vue.js development

Vue.js is currently one of the most powerful and easy to learn tools for web development. But after some time using the official templates I learned the following tricks to code faster, write less code and make my life easier.

So, here it is the process that I follow when I start a new project based on Vue.js

This github repo contains all the code explained in this article.

Let’s start creating an app with the vue webpack template using the vue-cli

vue init webpack my-simple-vue-project
# Say yes to use eslint and pick the standard

cd my-simple-vue-project
npm i
npm run dev

When everything is working open the folder with your favourite editor

atom .

If this is your first time with vue-cli you should take a moment to read and play with the template code.

Sass

Now let’s talk about css, css is hard to maintain and read. So let me present you sass, a tool that solves this problem allowing you to use cool things like nesting or variables in any browser.

This is an example of a vue component that uses sass

<template>
	<div id='hello'>
		<h1>{{ msg }}</h1>
	</div>
</template>

<script>
	export default {
		name: 'hello',

		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
			}
		},
	}
</script>

<style lang='sass' scoped>
	#hello
		text-align: center
</style>

It’s also possible to create a new file called hello.sass and then import it

<template>
	<div id='hello'>
		<h1>{{ msg }}</h1>
	</div>
</template>

<script>
	import './hello.sass'

	export default {
		name: 'hello',

		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
			}
		},
	}
</script>

So, now you can install sass in our project

npm i node-sass sass-loader

[note] You are going to see in the sass docs that there are two syntaxes, one is scss and the other one sass. The main difference is that scss uses semicolons, I prefer sass for simplicity.

Pug

Probably you just got used to code in html and now you don’t realize how unnecessary complex it is. But when a project grows and you start to have a lot of html code inside your components, it becomes really hard to read and maintain.

To solve this problem you can use pug, a template engine that generates html code with a much simpler syntax.

Here you have a rewrite of the previous vue component using pug

<template lang='pug'>
	#hello
		h1 {{ msg }}
</template>

<script>
	import './hello.sass'

	export default {
		name: 'hello',

		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
			}
		},
	}
</script>

And this is how you install pug

npm i pug

[note] Don’t forget to install the pug syntax highlighting into your editor.

If you use atom just install this package

apm install language-pug-jade

Use tabs and remove semicolons

I find tabs easer to use and configure in my editor, this is a personal taste. If you want to change this behaviour you can customize it in the .editorconfig file in the root of the project.

This one is ready for using tabs instead of spaces.

.editorconfig

root = true

[*]
charset = utf-8
indent_style = tab
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

A lot of people that code in javascript don’t know that semicolons are optional, so, if you don’t need them just remove it.

If you already selected standard in your eslint with the vue-cli, the semicolons are already removed. The following .eslintrc.js file has some rules to use tabs instead of spaces and to be able to use the latest es6 features with webpack.

.eslintrc.js

module.exports = {
	env: { browser: true, es6: true },
	root: true,
	parser: 'babel-eslint',
	parserOptions: { sourceType: 'module' },
	env: { browser: true },
	extends: 'standard',
	plugins: ['html'],
	globals: {
		vm: true,
	},
	rules: {
		'arrow-parens': 0,
		'generator-star-spacing': 0,
		'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
		'no-tabs': 0,
		indent: ['error', 'tab'],
		'space-before-function-paren': 0,
		'comma-dangle': 0,
		camelcase: 0,
	},
}

And that’s it!

If you have more ideas for simplifying this workflow even more, just leave a comment.