Pinia
How to use Vue with Pinia - free starter
This article will teach you how to integrate Pinia State Management Tool with your project. You can start managing your application's state more efficiently with Pinia features and Bootstrap 5.
Lets see how to use Pinia with MDB 5 across our layout, components, and utilities.
Since Vuex is now in maintenance mode, the recommended state management library is Pinia. Pinia provides a simple API and has solid type inference so you can use it with TypeScript.
Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new project
First, we need to create a new Vite project.
Step 1
Init the project and choose vue framework. You can add a name for your project as we did in example below
Step 2
Navigate to app's directory.
Step 3
Install dependencies.
Step 4
Setup MDB.
Step 5
Import CSS. Add the following line at the beginning of your main.ts file:
Step 6
Import Font Awesome and Roboto font. Add the following lines in public/index.html file inside
head
section:
Step 7
Enable sourcemaps during development.
Step 8
Launch the application.
Installation
Before we install Pinia, we have to create routing for our application.
Step 1
Since we are using vue 3, let's install vue router 4.
Step 2
Create router
folder inside src
directory and put index.ts
inside. The app will have 3 views, so we have to create 3 routes.
Step 3
Create a new views
directory with CarouselView1.vue, CarouselView2.vue and CarouselView3.vue
inside. For now, add a template for each view with name of the file inside, so we will be able to check if the content is changing.
Step 4
Next thing to do is to register our router inside main.ts
file.
Step 5
Now we can add them to App.vue
and check if everything is working properly. Let's put it inside a MDBNavbar
component to make everything look nice.
When you click on an item in the menu, you should see the content of our app changing.
Step 6
If everything works fine, we can finally install pinia
Step 7
We need to create a new store. Create a new directory called stores
and carouselStore.ts
inside it.
Step 8
Register the store inside main.ts
Adding new content
After we go through all the previous steps, we can start developing our application. We are going to use MDBCarousel
component with buttons that will increase a counter value.
Before that, lets delete style.css and HelloWorld.vue
files. We are not going to use them.
Step 1
First, let's create some data for the carousel component. Create a carouselData.ts
file inside stores
directory.
Step 2
Modify the store file. We are going to add a simple state with 3 values that we are going to read or change and 1 action to increment the counter value by 1. Note that we are importing carousel data here, so we won't have to do the same in every component. This will allow us to modify the data we pass to the carousel. You can try this yourself after completing this tutorial.
Step 3
Let's use the data and fill the views with content. To use the store all we have to do is to import it and invoke. Now we have access to our state, actions, getters and more.
CarouselView1.vue
CarouselView2.vue
CarouselView3.vue
Everything should work fine and after the route changes you can see the carousel is still on the same element. You can increase the counter on button click. The counter will keep that value and display it on other routes aswell.
More about pinia
For more information, see pinia documentation page. There you can read about other options, server-side rendering, multiple states and others.
Frontend features
MDB UI KIT:
To create the project we used mdb ui kit, with which we can build basic views very quickly.
Views and Layouts:
In this project we are using routing to change the view of the application. Thanks to that we can see the changes we are making after implementing pinia to our app.