DEV Community

Cover image for Quickstart guide for a new Vue.js project
Víctor Adrián
Víctor Adrián

Posted on • Originally published at lobotuerto.com on

Quickstart guide for a new Vue.js project


For the updated article that uses vue-cli 3.0 check out Quickstart guide for a new Vue.js project with vue-cli 3.0.

It also includes a content table for easy navigation over there. ;)


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.

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
Enter fullscreen mode Exit fullscreen mode

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 }]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

I like having the power of SCSS / SASS at my disposal when writing CSS rules.

--dev will add dependencies to the devDependencies section in yourpackage.json file:

yarn add sass-loader node-sass --dev
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And your src/components/HelloWorld.vue to:

<template>
  <v-content>
    <v-btn>
      Hello!
    </v-btn>
  </v-content>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Have a look

Start your project with:

yarn dev
Enter fullscreen mode Exit fullscreen mode

And visit: http://localhost:8080.

That’s it!

Have a good one. :)

Links

Top comments (5)

Collapse
 
rhymes profile image
rhymes • Edited

Thanks for the writeup!

I used vuelidate for a while but switched to vee-validate for two reasons:

  • I had to keep back and forth from the component to the validations section to know if it was required, or not and so on. I have a couple of huge components/pages (800+ lines) and having an inline v-validate helps.

  • I couldn't find an easy way to know from the parent if any of the children had a "dirty" state. See this issue

I rewrote validation with vee-validate in a couple of hours and now I have a validation mixin which contains this:

  computed: {
    isFormDirty() {
      if (this.validatedFields) {
        return Object.keys(this.validatedFields).some(key => this.validatedFields[key].dirty)
      }
      return false
    },
    isFormInvalid() {
      if (this.validatedFields) {
        return Object.keys(this.validatedFields).some(key => this.validatedFields[key].invalid)
      }
      return false
    },
  },

Also defining custom validators is not that different from vuelidate:

// https://github.com/ogt/valid-url
import validUrl from 'valid-url'

Validator.extend('uri', {
  getMessage(field) {
    return `The field ${field} is not a valid URL.`
  },
  validate(value) {
    return !!validUrl.isUri(value)
  },
})
Collapse
 
lobo_tuerto profile image
Víctor Adrián

Hey thanks for the pointer to that issue.

If later, what you mention becomes an impediment, I'll document the change/resolution on my article.

At least for now, Vuelidate covers all my expectations at two tenths of Vee-validate's size.

Collapse
 
rhymes profile image
rhymes

Yeah, vee-validate it's definitely bigger :-(

I'll keep an eye on the github issue

Collapse
 
straleb profile image
Strahinja Babić

Wow nice one, started learning Vue about a month ago, was checking mostly basic examples and a bit more serious examples when i started to work with Vue CLI but didnt use Vuetify and Vuelidate will surely check what it is about :D thanks for sharing the experience

Collapse
 
lobo_tuerto profile image
Víctor Adrián

You're welcome!