Vuetify 3 TypeScript Tutorial Series -Part 2
In Part 1 of this tutorial series, we covered the following steps:
- Setup the Task API on render.com with a PostgreSQL database on supabase.com
- Used Postman and a web browser to quickly test our API
If you missed Part 1, you can find it here: Part 1
First things first
Install the Vue CLI, we need to install the Vue CLI so we can create a Vue 3 app from the Terminal.
npm install -g @vue/cli
If the installation went successful you should be able to check the Vue CLI version:
vue --version
You can make sure that you have the latest Vue CLI by entering this command:
npm update -g @vue/cli
Next, we will use another package manager which is called “performant node package manager” short pnpm to for MacOS you can run:
brew install pnpm
on Windows:
npm install -g pnpmCreate a new Vuetify 3 project
Vuetify 3 is a popular Vue.js framework that simplifies front-end development with features like layout customization, responsive design, and functional components. It leverages the power of the Vue 3 Composition API for a more performant and modular codebase, resulting in lighter, faster components and improved overall application performance.
Run in your Terminal:
pnpm create vuetifyProject name:
task-app-vuetify-mediumWhich preset would you like to install?
Essentials (Base, Layouts, Pinia)Use TypeScript?
YesWould you like to install dependencies with yarn, npm, pnpm, or bun?
pnpm
Navigate into your project with Terminal and install the dependencies for the project:
cd task-app-vuetify-medium && pnpm install
OK now open your Project with your favorite Editor or IDE and open the file package.json and your line “dev” should look like this:
"dev": "vite"Then type in the Terminal:
pnpm dev
Click on the link http://localhost:3000/ and you should see this in the browser:
Go to the terminal again and stop the dev server by using:
control + CNow, we know the project works and we can add the necessary dependencies, open again package.json and replace your dependencies with these:
{
"name": "task-app-vuetify-medium",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --fix --ignore-path .gitignore",
"test:unit": "vitest",
"test:coverage": "vitest --coverage"
},
"dependencies": {
"@mdi/font": "7.0.96",
"axios": "^1.5.1",
"core-js": "^3.30.1",
"happy-dom": "12.5.1",
"jsdom": "^21.1.2",
"pinia": "^2.0.36",
"roboto-fontface": "*",
"vee-validate": "^4.10.7",
"vue": "^3.3.8",
"vue-router": "^4.1.6",
"vuetify": "^3.3.17",
"whatwg-fetch": "^3.6.10"
},
"devDependencies": {
"@babel/types": "^7.21.4",
"@testing-library/vue": "^6.6.1",
"@types/node": "^18.19.3",
"@vitejs/plugin-vue": "^4.4.1",
"@vitest/coverage-v8": "^1.0.1",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/test-utils": "^2.4.1",
"msw": "^1.3.2",
"axios-mock-adapter": "^1.21.4",
"eslint": "^8.47.0",
"eslint-plugin-vue": "^9.18.1",
"resize-observer-polyfill": "^1.5.1",
"sass": "^1.69.1",
"typescript": "^4.7.2",
"unplugin-fonts": "^1.0.3",
"vite-plugin-vuetify": "^2.0.1",
"vite": "^5.0.6",
"vitest": "^1.0.1",
"vue-tsc": "^1.8.22"
}
}PLEASE, make sure you have the exact same versions as I have, otherwise you might face some problems.
Install the new dependencies by running in the Terminal:
pnpm install
Ignore the warning with the deprecated dependencies.
To ensure our web app runs smoothly, we need to first configure three key files:
Open vite.config.mts and copy paste my version:
// Plugins
import Vue from '@vitejs/plugin-vue'
import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import ViteFonts from 'unplugin-fonts/vite'
// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
Vue({
template: { transformAssetUrls },
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
Vuetify({
autoImport: true,
styles: {
configFile: 'src/styles/settings.scss',
},
}),
ViteFonts({
google: {
families: [ {
name: 'Roboto',
styles: 'wght@100;300;400;500;700;900',
}],
},
}),
],
define: { 'process.env': {} },
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
server: {
port: 3000,
},
})I removed the wrong imports.
Next, go to router package and open index.ts and cop paste my version:
// Composables
import {createRouter, createWebHistory} from 'vue-router'
const routes = [
{
path: '/',
component: () => import('@/layouts/default.vue'),
children: [
{
path: '',
name: 'home',
// route level code-splitting
// this generates a separate chunk (Home-[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('@/pages/index.vue'),
props: true
},
],
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default routerLast but not least open pages package the index.vue file, here you need to adjust the import:
<template>
<HelloWorld />
</template>
<script lang="ts" setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>Now, you can run the web app with:
pnpm devOpen your web browser again at http://localhost:3000/
You should still see the default Vuetify page.
Let us quickly change the two primary colors. Go open src ->plugins -> vuetify.ts and add theme attribute to the method createVuetify() :
export default createVuetify({
theme: {
themes: {
light: {
colors: {
primary: '#145201', // dark green
secondary: '#5cf680', // light green
},
},
},
},
})Open your web browser again on http://localhost:3000/
Notice how the button color changed from blue to dark green because of our new primary color.
With that, we conclude the first part of this tutorial series. If you found it useful and informative, give it a clap. Here is Part 3
Don’t forget to check out the video playlist on YouTube:
Here is the source code on GitHub, check out the branch: part-two
