# Make Vuetify 2.0 project by vue-cli
This document is an updated version of [Vuetify01](Make Vuetify 2.0 project by vue-cli) which described with old version vue-cli. In this document, I'm using latest version vue-cli 4 at that time.
# Setup Vue SPA project with vue-cli
# update vue-cli
$ sudo npm install -g @vue/cli
$ vue --version
@vue/cli 4.2.2
# cleate project
$ vue create ml_register
Select default
Vue CLI v4.2.2
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
After a few minutes, Vue project creation will be completed.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project ml_register.
👉 Get started with the following commands:
$ cd ml_register
$ npm run serve
Move to created project folder.
$ cd ml_register/
# Add router to the project
# Add router
vue add router
📦 Installing @vue/cli-plugin-router...
+ @vue/cli-plugin-router@4.2.2
updated 1 package and audited 24881 packages in 20.5s
found 0 vulnerabilities
✔ Successfully installed plugin: @vue/cli-plugin-router
Use history mode for router by default
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n)
Then, install will be completed after a few minuts.
🚀 Invoking generator for @vue/cli-plugin-router...
📦 Installing additional dependencies...
added 1 package from 1 contributor and audited 24882 packages in 46.99s
found 0 vulnerabilities
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: @vue/cli-plugin-router
# Add Vuetify to the project
# Add Vuetify
$ 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.)
WARN There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N)
Choose Default.
? Choose a preset: (Use arrow keys)
❯ Default (recommended)
Prototype (rapid development)
Configure (advanced)
Install process will be completed after a few minuts.
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
vuetify Discord community: https://community.vuetifyjs.com
vuetify Github: https://github.com/vuetifyjs/vuetify
vuetify Support Vuetify: https://github.com/sponsors/johnleider
Run server.
$ npm run serve
# Customize default vuetify app
# On App.vue, remove v-app-bar
<template>
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
text
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2">Latest Release</span>
</v-btn>
</v-app-bar>
<v-content>
<HelloWorld/>
</v-content>
</v-app>
</template>
<template>
<v-app>
<v-content>
<HelloWorld/>
</v-content>
</v-app>
</template>
# replace the body of v-content from HelloWorld to router-view
<template>
<v-app>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
</template>
# remove all HelloWorld relateds
<template>
<v-app>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
//
}),
};
</script>
# delete Helloworld.vue component
# On Home.vue view, remove all Helloworld relateds, replace <HelloWorld /> with simple <div>
<template>
<div class="home">
<h1>Homepage</h1>
</div>
</template>
<script>
export default {
};
</script>
# Use finished files
You can clone completed files with following command.
git clone https://github.com/UedaTakeyuki/template4vutify.git -b v01
# initialization
Move to template4vutify folder, and do npm install to install dependent projects as vue and vuetify.
cd template4vutify
npm install
# run test server.
Run test server as npm run serve.
You can open this by http://localhost:8080/ or IP Addr of the running PC with port 8080.
# references
- Vuetify Tutorial #2 - Setting Up Vuetify (opens new window): youtube by The Net Ninja (opens new window)