Install Vue Router + Pinia with Vite + Vue

Intro

Vite can scaffold a Vue project for you with some simple commands in the terminal. The options offered do not include Vue Router or Pinia, Vue’s official state store. Let’s take a look at how we go about installing these in our project.

Scaffold a Vue project with Vite

First we start with the standard Vite create.

npm create vite@latest

You will see a message informing you some packages must be installed. Choose y and then return. Now we are presented with:

? Project name: » vite-project

Enter the name you’d like for your project folder and return. I named my folder vue-project. Upon return, I see the following:

√ Project name: ... vue-project
? Select a framework: » - Use arrow-keys. Return to submit.
>   vanilla
    vue
    react
    preact
    lit
    svelte

We are using Vue for this example, so I will arrow key to vue and return. My next options are:

√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.
>   vue
    vue-ts

For this example project, I am going to choose vue. You should use Typescript 🙂. Let’s take a look at what we see next:

√ Project name: ... vue-project
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in D:\Sites\vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run dev

Execute the commands mentioned and the end, and we see our options we’ve selected, followed by the location of our scaffolded project. Your path will almost certainly be different from mine.

Now we have our Vue project. Let’s work on installing Vue Router.

Installing Vue Router

From our previously scaffolded project, we will run:

npm install vue-router@4

Once that install command finishes, Vue Router is installed. Now let’s add it to our project. To do this we will create a file /src/router.js. Let’s set up the router code:

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    name: 'Home',
    path: '/',
    component: () => import('./components/HelloWorld.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

This code sets up a Home route at / and uses createWebHistory. You may not need this, but I find it most helpful. For information on how it works go here.

We will need to change our app to use router-view in order to see our router working. Let’s make the change in `/src/App.vue now:

<script setup></script>

<template>
  <router-view></router-view>
</template>

We’ve removed the component HelloWorld.vue since it is served by the route, and we have changed the <template> to show the <router-view>.

Now we will import the router into our Vue app. To do this we will be working in /src/main.js. The final file will look like this:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

At line 3 we import the router we exported in the previous code. We add that import to use() before we mount our app. That does it for installing Vue Router, now for Pinia.

Installing Pinia

Pinia is Vue’s official state store. Let’s install it:

npm install pinia

With Pinia installed, let’s add /src/store.js as our store file:

import { defineStore } from 'pinia';

export const mainStore = defineStore('main', {
  state: () => ({
    message: 'My Pinia store',
  }),
  getters: {
    myMessageGetter(state) {
      return state.message;
    },
  },
  actions: {
    changeMessage() {
      return (this.message = 'My new Pinia store');
    },
  },
});

We have defined our mainStore and exported it. You can name that store whatever you’d like. I’ve also provided one example for each state, getter, and action.

We have one final change to make and our store will be ready in our application. This change is made in /src/main.js:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';

const pinia = createPinia();

createApp(App).use(router).use(pinia).mount('#app');

We’ve imported createPinia and set it pinia. Just like with the router, we pass pinia to use() and we are set.

At this point we have Vue Router and Pinia installed in our project. If you want to see how to access the store from a Vue component read on, otherwise thanks for reading!

Bonus: Accessing our state store from Vue SFC

We are going to change HelloWorld.vue to use the store. Let’s change HelloWorld.vue and that will do it for this post!

<script setup>
import { mainStore } from '../store';

const store = mainStore();
</script>

<template>
  <h1>{{ store.myMessageGetter }}</h1>
</template>

Conclusion

Our Vue project has Vue Router and Pinia installed and initialized. This project now utilizes the true power of Vue. Good luck and have fun coding!