Setup Source Template for Vue 3 – Part 2

Friday, 03/02/2023

Tram Ho

Introduce

Hello everyone, in part 1 , I gave an overview of the source code and basic setup of Vue 3 + Vite. In this article, I continue to learn about and setup vue-router , pinia and Vitest

Content

⚡️ Vue 3 , Vite , pnpm
📦 Components auto importing
🎨 UnoCSS – 1 library inspired by Windi CSS, Tailwind CSS and Twind. ( Pretty good)
😃 Use icons from any icon sets with classes
📥 APIs auto import – import automatically using Composition API,..
🦾 TypeScript , of course
🍍 State Management via Pinia , Vue Router
⚙️ Unit Testing with Vitest

This is the folder structure of the project after setup.

vue-template/
 ├── public/
 |    ├── favicon.ico
 ├── src/
 |    ├── assets/
 |    |    └── logo.png
 |    ├── components/
 |    |    └── HelloWorld.vue
 |    ├── core/
 |    ├── hooks/
 |    |    └── useAuth.ts
 |    ├── layouts/
 |    |    └── BlankLayout.vue
 |    |    └── MainLayout.vue
 |    ├── pages/
 |    |    └── Dashboard.vue
 |    |    └── Error.vue
 |    |    └── NotFound.vue
 |    ├── routes/
 |    |    └── index.ts
 |    ├── stores/
 |    |    └── auth.ts
 |    ├── test/
 |    |    └── components/
 |    |    |    └── Sample.spec.ts
 |    ├── App.vue
 |    └── main.ts
 |    └── vite-env.d.ts
 |    └── vue-shim.d.ts
 ├── package.json
 ├── README.md
 ├── .cz-config.ts
 ├── .env.sample
 ├── .eslintrc
 ├── .prettierrc
 ├── .commitlint.config.cjs
 ├── tsconfig.json
 ├── tsconfig.node.json
 └── vite.config.js
 └── unocss.config.ts

vue-template/

├── public/

| ├── favicon.ico

├── src/

| ├── assets/

| | └── logo.png

| ├── components/

| | └── HelloWorld.vue

| ├── core/

| ├── hooks/

| | └── useAuth.ts

| ├── layouts/

| | └── BlankLayout.vue

| | └── MainLayout.vue

| ├── pages/

| | └── Dashboard.vue

| | └── Error.vue

| | └── NotFound.vue

| ├── routes/

| | └── index.ts

| ├── stores/

| | └── auth.ts

| ├── test/

| | └── components/

| | | └── Sample.spec.ts

| ├── App.vue

| └── main.ts

| └── vite-env.d.ts

| └── vue-shim.d.ts

├── package.json

├── README.md

├── .cz-config.ts

├── .env.sample

├── .eslintrc

├── .prettierrc

├── .commitlint.config.cjs

├── tsconfig.json

├── tsconfig.node.json

└── vite.config.js

└── unocss.config.ts

Setting

In this section, I will guide you to setup:
🍍 State Management via Pinia , Vue Router
⚙️ Unit Testing with Vitest

Now we will install vue-router and pinia from PNPM into our project.

Vue Router

vue-router is the official router for Vue.js. We will need to install version 4 compatible with Vue 3 :

$ <span class="token function">pnpm</span> i vue-router@4

1 2	$ <span class="token function">pnpm</span> i vue-router@4

Create a routes folder and create an index.ts . file

<span class="token comment">// index.ts</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
<span class="token keyword">import</span> Homepage <span class="token keyword">from</span> <span class="token string">'./home/Home.vue'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> SignIn <span class="token keyword">from</span> <span class="token string">'./sign-in/SignIn.vue'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> Cart <span class="token keyword">from</span> <span class="token string">'./cart/Cart.vue'</span> <span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path <span class="token operator">:</span> <span class="token string">'/'</span> <span class="token punctuation">,</span>
    component <span class="token operator">:</span> MainLayout <span class="token punctuation">,</span>
    requiresAuth <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>
    children <span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path <span class="token operator">:</span> <span class="token string">'dashboard'</span> <span class="token punctuation">,</span>
        name <span class="token operator">:</span> <span class="token string">'Dashboard'</span> <span class="token punctuation">,</span>
        <span class="token function-variable function">component</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">'@pages/DashBoard.vue'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
        meta <span class="token operator">:</span> <span class="token punctuation">{</span>
          requiresAuth <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>
          headerTitle <span class="token operator">:</span> <span class="token string">'Dashboard'</span> <span class="token punctuation">,</span>
          searchConfig <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          storeConfig <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token punctuation">]</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path <span class="token operator">:</span> <span class="token string">'/login'</span> <span class="token punctuation">,</span>
    component <span class="token operator">:</span> BlankLayout <span class="token punctuation">,</span>
    children <span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path <span class="token operator">:</span> <span class="token string">'login'</span> <span class="token punctuation">,</span>
        name <span class="token operator">:</span> <span class="token string">'Login'</span> <span class="token punctuation">,</span>
        <span class="token function-variable function">component</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">'@pages/Login.vue'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
      <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token punctuation">]</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path <span class="token operator">:</span> <span class="token string">'/:pathMatch(.*)*'</span> <span class="token punctuation">,</span>
    name <span class="token operator">:</span> <span class="token string">'Page Not Found'</span> <span class="token punctuation">,</span>
    <span class="token function-variable function">component</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">'@pages/NotFound.vue'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path <span class="token operator">:</span> <span class="token string">'/error'</span> <span class="token punctuation">,</span>
    name <span class="token operator">:</span> <span class="token string">'Error'</span> <span class="token punctuation">,</span>
    <span class="token function-variable function">component</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">'@pages/Error.vue'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
<span class="token punctuation">]</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">history</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">createRouter</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    history <span class="token punctuation">,</span>
    routes
  <span class="token punctuation">}</span> <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

// index.ts

import { createRouter } from 'vue-router'

import Homepage from './home/Home.vue' ;

import SignIn from './sign-in/SignIn.vue' ;

import Cart from './cart/Cart.vue' ;

export const routes = [

{

path : '/' ,

component : MainLayout ,

requiresAuth : true ,

children : [

{

path : 'dashboard' ,

name : 'Dashboard' ,

component : ( ) => import ( '@pages/DashBoard.vue' ) ,

meta : {

requiresAuth : true ,

headerTitle : 'Dashboard' ,

searchConfig : { } ,

storeConfig : { } ,

} ,

] ,

} ,

{

path : '/login' ,

component : BlankLayout ,

children : [

{

path : 'login' ,

name : 'Login' ,

component : ( ) => import ( '@pages/Login.vue' ) ,

} ,

] ,

} ,

{

path : '/:pathMatch(.*)*' ,

name : 'Page Not Found' ,

component : ( ) => import ( '@pages/NotFound.vue' ) ,

} ,

{

path : '/error' ,

name : 'Error' ,

component : ( ) => import ( '@pages/Error.vue' ) ,

} ,

]

export default function ( history ) {

return createRouter ( {

history ,

routes

} )

}

Import routes into main.ts . file

<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span> <span class="token punctuation">(</span> App <span class="token punctuation">)</span>
app <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> router <span class="token punctuation">)</span>
<span class="token operator">...</span>

import router from './router'

const app = createApp ( App )

app . use ( router )

...

Pinia

Pinia is one of the newest projects to emerge from the Vue ecosystem and it is the new official State Management tool for Vue.js applications. Its api is very similar to Vuex (its predecessor) and it is designed to be faster and lighter.

$ <span class="token function">pnpm</span> i pinia

1 2	$ <span class="token function">pnpm</span> i pinia

Create a folder stores and create a file auth.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">,</span> acceptHMRUpdate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span>

<span class="token keyword">interface</span> <span class="token class-name">IUser</span> <span class="token punctuation">{</span>
  email <span class="token operator">:</span> string
  name <span class="token operator">:</span> string
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> useAuthStore <span class="token operator">=</span> <span class="token function">defineStore</span> <span class="token punctuation">(</span> <span class="token string">'auth'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> isLoggedIn <span class="token operator">=</span> <span class="token function">ref</span> <span class="token punctuation">(</span> <span class="token boolean">false</span> <span class="token punctuation">)</span>
  <span class="token keyword">const</span> info <span class="token operator">=</span> ref <span class="token operator">&lt;</span> IUser <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">&gt;</span> <span class="token punctuation">(</span> <span class="token keyword">null</span> <span class="token punctuation">)</span>

  <span class="token keyword">const</span> <span class="token function-variable function">setInfo</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">user <span class="token operator">:</span> IUser</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    info <span class="token punctuation">.</span> value <span class="token operator">=</span> user
  <span class="token punctuation">}</span>

  <span class="token keyword">const</span> <span class="token function-variable function">setIsLoggedIn</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">value <span class="token operator">:</span> boolean</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    isLoggedIn <span class="token punctuation">.</span> value <span class="token operator">=</span> value
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    isLoggedIn <span class="token punctuation">,</span>
    info <span class="token punctuation">,</span>
    setInfo <span class="token punctuation">,</span>
    setIsLoggedIn <span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">import</span> <span class="token punctuation">.</span> meta <span class="token punctuation">.</span> hot <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">import</span> <span class="token punctuation">.</span> meta <span class="token punctuation">.</span> hot <span class="token punctuation">.</span> <span class="token function">accept</span> <span class="token punctuation">(</span> <span class="token function">acceptHMRUpdate</span> <span class="token punctuation">(</span> useAuthStore <span class="token punctuation">,</span> <span class="token keyword">import</span> <span class="token punctuation">.</span> meta <span class="token punctuation">.</span> hot <span class="token punctuation">)</span> <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import { defineStore , acceptHMRUpdate } from 'pinia'

interface IUser {

email : string

name : string

}

export const useAuthStore = defineStore ( 'auth' , ( ) => {

const isLoggedIn = ref ( false )

const info = ref < IUser | null > ( null )

const setInfo = ( user : IUser ) => {

info . value = user

}

const setIsLoggedIn = ( value : boolean ) => {

isLoggedIn . value = value

}

return {

isLoggedIn ,

info ,

setInfo ,

setIsLoggedIn ,

}

} )

if ( import . meta . hot ) {

import . meta . hot . accept ( acceptHMRUpdate ( useAuthStore , import . meta . hot ) )

}

Import pinia into main.ts . file

<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span> <span class="token punctuation">(</span> App <span class="token punctuation">)</span>
<span class="token operator">...</span>
app <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> <span class="token function">createPinia</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
<span class="token operator">...</span>

import { createPinia } from 'pinia'

...

app . use ( createPinia ( ) )

...

Vitest

Vitest is a very fast unit test framework powered by Vite.

Vitest requires Vite >=v3.0.0 and Node >=v14

$ <span class="token function">pnpm</span> i -D vitest

1 2	$ <span class="token function">pnpm</span> i -D vitest

add test script to package :

<span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">"dev"</span> <span class="token operator">:</span> <span class="token string">"vite"</span> <span class="token punctuation">,</span>
  <span class="token property">"build"</span> <span class="token operator">:</span> <span class="token string">"vue-tsc &amp;&amp; vite build"</span> <span class="token punctuation">,</span>
  <span class="token property">"preview"</span> <span class="token operator">:</span> <span class="token string">"vite preview"</span> <span class="token punctuation">,</span>
  <span class="token property">"test"</span> <span class="token operator">:</span> <span class="token string">"vitest"</span>
<span class="token punctuation">}</span>

"scripts" : {

"dev" : "vite" ,

"build" : "vue-tsc && vite build" ,

"preview" : "vite preview" ,

"test" : "vitest"

}

We will try to write some tests in the sample.spec.ts file to check whether the test is working or not.

<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">,</span> test <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vitest'</span>

<span class="token function">test</span> <span class="token punctuation">(</span> <span class="token string">'Math.sqrt()'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">expect</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">sqrt</span> <span class="token punctuation">(</span> <span class="token number">4</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toBe</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token punctuation">)</span>
  <span class="token function">expect</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">sqrt</span> <span class="token punctuation">(</span> <span class="token number">144</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toBe</span> <span class="token punctuation">(</span> <span class="token number">12</span> <span class="token punctuation">)</span>
  <span class="token function">expect</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token function">sqrt</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toBe</span> <span class="token punctuation">(</span> Math <span class="token punctuation">.</span> <span class="token constant">SQRT2</span> <span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span>

import { expect , test } from 'vitest'

test ( 'Math.sqrt()' , ( ) => {

expect ( Math . sqrt ( 4 ) ) . toBe ( 2 )

expect ( Math . sqrt ( 144 ) ) . toBe ( 12 )

expect ( Math . sqrt ( 2 ) ) . toBe ( Math . SQRT2 )

} )

Then we run pnpm run test and the result is:

End

In this part we have learned and setup vue-router , pinia and testing . In the next part we will learn about and set up eslint , prettierrc and the commitlint rule .

The source

https://github.com/trungpham71198/vue-template/tree/feat/chapter-2

Share the news now

Source : Viblo

Setup Source Template for Vue 3 – Part 2

Introduce

Content

Setting

Vue Router

Pinia

Vitest

End

The source

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers