Quickstart guide for a new Vue.js project — lobo_tuerto's notes
Original publication at: lobo_tuerto's notes
Opinions
In the little time I have delving into Vue.js I've come to really appreciate the framework,
and its surrounding libraries.
This opinionated guide details the steps I take to start with a solid foundation for a new
Vue.js project.
What particular opinions does it include?
Well, for starters:
- Package manager: Yarn --- Fast, reliable, and secure dependency management.
- Project generation tool: vue-cli --- CLI for rapid Vue.js development.
- UI framework: Vuetify --- Material Design component framework.
- Material icons library: Google Material Icons --- Beautifully crafted, delightful, and easy to use.
- Validation library: Vuelidate --- Simple, lightweight model-based validation for Vue.js.
- Ajax library: Axios --- Promise based HTTP client for the browser and Node.js.
- Utility library: Lodash --- A modern JavaScript utility library.
- State management pattern + library: Vuex --- Centralized state management for Vue.js.
I have found that these tools and libraries are performant, intuitive and very easy to work with.
I had a similar stack for Angular that included Angular Material plus some custom
component primitives for rendering dynamic forms, data tables and other stuff.
I was really fond of the dynamic forms implementation, it allowed the user to specify
highly configurable forms using a simple JSON specification.
The generated forms integrated well with our Rails JSON API backend.
I plan to write a tutorial about doing the same thing but this time with Vue.js and
Vuetify, but I digress...
Setting up a new Vue.js app for success
Here we'll see how to setup a newly created app with vue-cli so it'll be ready for
us to start hacking on it right away.
Prerequisites
Install Node.js, Yarn and vue-cli
Generate a new project
vue init webpack my-project
I usually accept all defaults, except for the package manager.
I pick Yarn when asked.
As you can see we are using the Webpack template.
Here is the list for the official templates.
Adjust ESLint rules
Add this line to the rules key in the .eslintrc.js file:
'no-multiple-empty-lines': [2, { max: 2 }]
The reason for this change, is that I usually leave two consecutive blank lines
between some elements inside my .vue component files.
For example between import sections and following code.
Or between <template>, <script> and <style>.
Install project dependencies
Use Yarn to add the project dependencies:
yarn add vuetify material-design-icons vuelidate axios lodash vuex
I like having the power of SCSS / SASS at my disposal when writing CSS rules.
Also, I usually like to write my templates using Pug.
--dev will add dependencies to the devDependencies section in your
package.json file:
yarn add sass-loader node-sass pug --dev
Initial app configuration and setup
To setup Vuetify, Google Material Icons and Vuelidate, you need
to add these lines to src/main.js:
import Vuelidate from 'vuelidate'
import Vuetify from 'vuetify'
import 'material-design-icons/iconfont/material-icons.css'
import 'vuetify/dist/vuetify.css'
Vue.use(Vuelidate)
Vue.use(Vuetify)
To see Vuetify in action, change your src/App.vue file to:
<template>
<v-app>
<router-view/>
</v-app>
</template>
<script>
export default {
name: 'App'
}
</script>
And your src/components/HelloWorld.vue to:
<template>
<v-content>
<v-btn>
Hello!
</v-btn>
</v-content>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
Typography
The Material Design guidelines for typography, state that Roboto ---and Noto--- are the standard typefaces to use.
Add this to the <head> section of your index.html file:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
Have a look
Start your project with:
yarn dev
And visit: http://localhost:8080.
That's it!
Have a good one. 
Bonus section
Color theme tool
If you are looking for a Material Design color browser, a tool that'll let you mix and match colors,
then check this Vuetify color theme builder out!
Useful links
- Vue.js style guide
- Rethinking validations for Vue.js
- 7 secret patterns Vue consultants don't want you to know
- Vuex core concepts
- Vue & Vuex tutorial - VIDEO
- Comparison with other frameworks --- vs React, AngularJS, Angular, Ember, Knockout, Polymer, Riot
— lt
