Quickstart guide for a new Vue.js project
Tags: vue, javascript, webdev, vuetify
Published: 2018-03-10 21:43:21

---
title: Quickstart guide for a new Vue.js project
published: true
tags: ["vue", "javascript", "webdev", "vuetify"]
canonical_url: https://lobotuerto.com/blog/quickstart-guide-for-a-new-vuejs-project/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9qypxdkcnrvkzqhxeo59.png
---

***

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.](https://lobotuerto.com/blog/quickstart-guide-for-a-new-vuejs-project/)

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

***

# Opinions

In the little time I have delving into [Vue.js](https://vuejs.org/) 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](https://yarnpkg.com/en/) — Fast, reliable, and secure dependency management.
- **Project generation tool:** [vue-cli](https://github.com/vuejs/vue-cli/tree/v2.9.3) — CLI for rapid Vue.js development.
- **UI framework:** [Vuetify](https://vuetifyjs.com/) — Material Design component framework.
- **Material icons library:** [Google Material Icons](https://material.io/icons/) — Beautifully crafted, delightful, and easy to use.
- **Validation library:** [Vuelidate](https://monterail.github.io/vuelidate/) — Simple, lightweight model-based validation for Vue.js.
- **Ajax library:** [Axios](https://github.com/axios/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](https://angular.io/) that included [Angular Material](https://material.angular.io/) 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](http://rubyonrails.org/) [JSON API](http://jsonapi.org/) 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

- [How to install Node.js in Ubuntu.](https://lobotuerto.com/blog/como-instalar-nodejs-en-ubuntu/ "How to install Node.js in Ubuntu")
- [How to install Node.js in Manjaro Linux.](https://lobotuerto.com/blog/how-to-install-nodejs-in-manjaro-linux/ "How to install Node.js in Manjaro Linux")

## Generate a new project

```bash
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](https://webpack.js.org/) template.  
Here is the list for the [official templates.](https://github.com/vuejs/vue-cli/tree/v2.9.3#official-templates)

## Adjust ESLint rules

Add this line to the `rules` key in the `.eslintrc.js` file:

```js
'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:

```bash
yarn add vuetify material-design-icons vuelidate axios
```

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

`--dev` will add dependencies to the `devDependencies` section in your`package.json` file:

```bash
yarn add sass-loader node-sass --dev
```

## Initial app configuration and setup

To setup **Vuetify** , **Google Material Icons** and **Vuelidate** , you need to add these lines to `src/main.js`:

```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:

```html
<template>
  <v-app>
    <router-view/>
  </v-app>
</template>

<script>
export default {
  name: 'App'
}
</script>
```

And your `src/components/HelloWorld.vue` to:

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

<script>
export default {
  name: 'HelloWorld'
}
</script>
```

## Typography

The Material Design [guidelines for typography,](https://material.io/guidelines/style/typography.html) state that **Roboto** —and **Noto** — are the standard typefaces to use.

Add this to the `<head>` section of your `index.html` file:

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
```

## Have a look

Start your project with:

```bash
yarn dev
```

And visit: `http://localhost:8080`.

That’s it!  
Have a good one. :)

# Links

- [Rethinking validations for Vue.js](https://www.monterail.com/blog/2016/rethinking-validations-for-vue-js)