How to make a simple SPA base project with Vue2, Vue Router and Vuetify
Tags: vue, vuetify, vuerouter
Published: 2021-06-08 00:19:59

---
title: How to make a simple SPA base project with Vue2, Vue Router and Vuetify
published: true
description: 
tags: Vue, Vuetify, VueRouter
//cover_image: https://direct_url_to_image.jpg
---
Following steps are confirmed at 7th June 2021 by me.

## 1 update vue-cli
```bash
$ yarn global add @vue/cli

$ vue --version
@vue/cli 4.5.13
```

***

## 2 cleate your project
```bash
vue create myproject
```

Select Vue 2 for now.
```bash
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features 
```

Wait an ages (-: for creating your project.

```
Vue CLI v4.5.13
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v4.5.13
✨  Creating project in /Volumes/devtmp/MyVuetify/myproject.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 198.70s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 269.16s.
⚓  Running completion hooks...
[-/4] ⠠ waiting...
📄  Generating README.md...

🎉  Successfully created project myproject.
👉  Get started with the following commands:

 $ cd myproject
 $ yarn serve
```

Then move to created project folder.

```bash
 $ cd myproject
```

***

### 3 Add router
```
$ vue add router
```

I recommend to select history mode as "Yes", but it OK as you like.
```
? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) (Y/n) 
```

Wait a couple of ages (-:

```bash
$ vue add router

📦  Installing @vue/cli-plugin-router...

yarn add v1.22.10
[1/4] 🔍  Resolving packages...



success Saved lockfile.
success Saved 0 new dependencies.
✨  Done in 339.87s.
✔  Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) Yes

🚀  Invoking generator for @vue/cli-plugin-router...
📦  Installing additional dependencies...

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 105.88s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router
```

***

### 4 Add Vuetify
```bash
$ vue add vuetify
```

Select y (or N if you would register current state with git repository first, but I think it doesn't make much sense.)
```bash
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N) 
```

Select default
```bash:
? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Preview (Vuetify 3 + Vite) 
  Prototype (rapid development) 
  V3 (alpha) 
  Configure (advanced) 
```

Wait few ages.

***

### 5 Delete useless decorations from App.vue
Open src/App.vue file, and delete the lines from ``<v-app-bar>`` to ``</v-app-bar>``. After this, your ``App.vue`` should be as follows:

```vue
<template>
  <v-app>

    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    //
  }),
};
</script>
```

Then, remove ``src/views/Home.vue`` and recreate it as copy from ``src/views/About`` to ``src/views/Home.vue`` as follows

```bash
cp src/views/About.vue src/views/Home.vue 
```

Then, open ``Home.vue`` and change the string ``This is an about page`` to ``This is an home page``. After this, your ``Home.vue`` should be as follows:

```vue
<template>
  <div class="about">
    <h1>This is an home page</h1>
  </div>
</template>
```

Finally, remove ``src/components/HelloWorld.vue`` file.

***

### 1.6 Add Material Icon link
Add Material Icon link to ``public/index.html`` as follow:

```vue
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
inside between ``<head>`` and ``</head>``. After this, your ``index.html`` file can be as follows:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
```

***

### 7 Start server
Start server as 

```bash
yarn serve
```

Then open running App, usually ``http://localhost:8080/ ``

```bash
 DONE  Compiled successfully in 20496ms                                                           16:14:57


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.11.9:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
```

You must be looking at such a dull page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdswg7ajlbrwozind2x1.png)

In case you're facing [this error](https://stackoverflow.com/questions/58232691/sass-loader-error-options-has-an-unknown-property-indentedsyntax-when-upgrad/58269208#58269208), downgrade sass-loader as mentioned [this answer](https://stackoverflow.com/a/58269208/11073131) as follows:

```bash
yarn add sass-loader@7.3.1
```
***

## History
- 07 jun 2021: first version