DEV Community

Dr. Takeyuki Ueda
Dr. Takeyuki Ueda

Posted on

How to make a simple SPA base project with Vue2, Vue Router and Vuetify

#vue #vuetify #vuerouter

Following steps are confirmed at 7th June 2021 by me.

1 update vue-cli 

$ yarn global add @vue/cli

$ vue --version
@vue/cli 4.5.13
Enter fullscreen mode Exit fullscreen mode

2 cleate your project 

vue create myproject
Enter fullscreen mode Exit fullscreen mode

Select Vue 2 for now.

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

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

Then move to created project folder.

 $ cd myproject
Enter fullscreen mode Exit fullscreen mode

3 Add router 

$ vue add router
Enter fullscreen mode Exit fullscreen mode

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

Wait a couple of ages (-:

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

4 Add Vuetify 

$ vue add vuetify
Enter fullscreen mode Exit fullscreen mode

Select y (or N if you would register current state with git repository first, but I think it doesn't make much sense.)

 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N)
Enter fullscreen mode Exit fullscreen mode

Select default

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Preview (Vuetify 3 + Vite) 
  Prototype (rapid development) 
  V3 (alpha) 
  Configure (advanced)
Enter fullscreen mode Exit fullscreen mode

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:

<template>
  <v-app>

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

<script>

export default {
  name: 'App',

  data: () => ({
    //
  }),
};
</script>
Enter fullscreen mode Exit fullscreen mode

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

cp src/views/About.vue src/views/Home.vue
Enter fullscreen mode Exit fullscreen mode

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:

<template>
  <div class="about">
    <h1>This is an home page</h1>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

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

1.6 Add Material Icon link

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

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Enter fullscreen mode Exit fullscreen mode

inside between <head> and </head>. After this, your index.html file can be as follows:

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

7 Start server

Start server as

yarn serve
Enter fullscreen mode Exit fullscreen mode

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

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

You must be looking at such a dull page.

Alt Text

In case you're facing this error, downgrade sass-loader as mentioned this answer as follows:

yarn add sass-loader@7.3.1
Enter fullscreen mode Exit fullscreen mode

History

  • 07 jun 2021: first version

Top comments (0)

Read next

uncle_ben profile image

Testing Vue.js with Playwright: A Funny Journey to Flawless Web Apps

Ben ltaif -

blamsa0mine profile image

💡 Building a Nuxt 3 App with Pinia and Testing It with Cypress 🚀

A0mineTV -

robertobutti profile image

Build a static website with Markdown content, using Nuxt and Fusionable (server API approach)

Roberto B. -

kola_yusuf profile image

I built a football match analysis tool and open-sourced it! ⚽🚀

Kolawole Yusuf -