DEV Community

Cover image for Getting started with Pinia for VueJS and NuxtJS๐Ÿ
Bruno
Bruno

Posted on

Getting started with Pinia for VueJS and NuxtJS๐Ÿ

Say goodbye to cluttered and confusing state management in your VueJS and NuxtJS projects with Pinia! This tropical paradise of a plugin is not just your average state management tool, it's a full-featured framework that'll have you sipping on pina coladas while you build dynamic and responsive user interfaces.

pixel pineapples

With its powerful store manager, customizable layout system, and a plethora of tasty directives and components, Pinia is the ultimate way to add some island vibes to your development process. So put on your Hawaiian shirt and let's get ready to party with Pinia!

๐Ÿ What exactly is Pinia?

Pinia is a versatile and lightweight plugin for VueJS and NuxtJS that makes building dynamic and responsive user interfaces a breeze. It's packed with all the features you need to create amazing projects and it is designed to make state management easy and organized.

organised book shelf

With Pinia, you can manage your application's state in a centralized way, customize the layout of your application, and use a variety of directives and components to make your development process more efficient.

๐Ÿค” How does it differ from Vuex?

You may now ask yourserlf: "But how does it differ from Vuex?". Good question indeed!

what's the difference?

Pinia and Vuex are both state management libraries for VueJS, but they have some key differences.

Vuex

Vuex is a centralized state management library that follows the Flux architecture pattern. It uses a strict unidirectional data flow and provides a centralized store for the whole application. This makes it simple to understand, but it can become complex when the application grows.

Pinia

cat pineapple

On the other hand, Pinia is a state management library that is built on top of Vuex. It aims to provide a more flexible approach to state management by allowing developers to split the store into smaller, more manageable modules. This can make it easier to understand and maintain, especially for larger applications. Additionally, Pinia also provides a layout system and a set of directives and components that can help you to build their application in an easy and efficient way. It's a sort of "Jack of all trades", like the cat above who is not only a cat, but also a pineapple ๐Ÿ™ƒ

โœ… Why can it be a better choice?

Now that you have an idea of the differences, you may ask why use one over the other, right? Well, I will share some reasons why Pinia might make a good choice:

  • Pinia allows you to split the store into smaller, more manageable modules, which can make it easier to understand and maintain, especially for larger applications.
  • Pinia provides a simpler and more intuitive API that makes it easy to get started with state management in your VueJS and NuxtJS projects.
  • Pinia also provides a layout system and a set of directives and components that can help developers to build their application in an easy and efficient way.
  • Pinia allows to organize the state in a more natural way, making it easier to understand and to debug the application.
  • Pinia provides a dynamic layout system that can be used to switch layouts on the fly and also to customize the layout of the application

At the end of the day though, the choice over one or the other comes down to your specific needs for the project you are working on in particular. One could argue for hours what the best choice would be and like a colleague once told me: "it depends" ๐Ÿ˜‰

friends pineapple talk

๐Ÿ’พ How to install Pinia

Too much talking, right? ๐Ÿ˜… Let's now dive into what really matters - installing and using it. ๐Ÿ˜Ž

NPM



npm install @pina/core


Enter fullscreen mode Exit fullscreen mode

Yarn



yarn add @pina/core


Enter fullscreen mode Exit fullscreen mode

Now that you have installed it, let's import it to your project.

VueJS



import Pinia from '@pina/core'

Vue.use(Pinia)


Enter fullscreen mode Exit fullscreen mode

NuxtJS



import Pinia from '@pina/core'
export default {
  // ...
  modules: [
    '@pina/core/nuxt'
  ],
  // ...
  pinia: {
    modules: [
        // modules goes here
    ]
  }
}


Enter fullscreen mode Exit fullscreen mode

Installing and importing is done ๐Ÿ‘ Let's now use it in an example project!

๐Ÿšง Use case

  1. Setup a store to manage the state in your app:


// store.js

import { createStore } from '@pina/core'

export const store = createStore({
  state: {
    message: 'Hello, World!'
  },
  mutations: {
    updateMessage (state, payload) {
      state.message = payload
    }
  }
})


Enter fullscreen mode Exit fullscreen mode
  1. Create a component and paste the following template and script tags:


// PiniaExample.vue

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage('Hello, Pinia!')">Update Message</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from '@pina/core'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
}
</script>


Enter fullscreen mode Exit fullscreen mode

I will now break the project down to simple steps so you have an idea of what's happening under the hood:

  1. In the store, state has a message property which is set to "Hello, World!". The mutations are methods that allow us to modify the state. In this example, there is a mutation called updateMessage that takes a payload and updates the message property in the state.

  2. The template in PiniaExample.vue displays the message from the store and has a button that when clicked, triggers the updateMessage mutation. The template uses the mapState helper from Pinia to access the message property in the store.

  3. When the button is clicked, the updateMessage method is called and it triggers the mutation in the store, changing the message property.

Following the idea of the project above, you should be able to see the similarities between Vuex, as well as the way you can apply it to your project for state management. Good job!๐Ÿ‘

Thank you for reading!

I hope that this article helped you gain an understanding of how Pinia works in it's core, and that you can take this tool to your project in the way you need and that will help you scale more easily.

Make sure to follow me on my social media to stay up to date on projects I work on or contribute to:

I look forward to seeing you on my next one!๐Ÿ‘‹

Until then,
Happy Coding!๐Ÿ‘ฉโ€๐Ÿ’ป

Top comments (8)

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Great intro post! I'm working on the move to Vue 3 and didn't realize that Pinia wasn't that different from Vuex (in execution) ๐Ÿ˜…

This might be a new article, but how does the PiniaExample.vue file look with <script setup>?

Collapse
 
bcostaaa01 profile image
Bruno

Thank you, Tyler!๐Ÿ™‚

Ah, yeah, Vuex is kinda โ€œVuexishโ€. To be honest, I like working with both ๐Ÿ˜…

Thatโ€™s a good question and idea for a next article indeed! I will write on that soon!๐Ÿ™‚

Collapse
 
gktim profile image
gkTim

Great article. Thumbs up for the gif selection :D

Collapse
 
bcostaaa01 profile image
Bruno

Aw hehe thank you, @gktim! :D

Collapse
 
gustavupp profile image
Gus Pear ๐Ÿ

That is indeed a sweet intro to pinia Bruno!

Keep consistent ๐Ÿš€๐Ÿš€

Collapse
 
bcostaaa01 profile image
Bruno

Thank you so much Gus!๐Ÿ˜ƒ

Collapse
 
tempestrock profile image
Tempest Rock

Thanks a lot for the nice comparison. Really helpful!
What may be cool for many readers is to see a 'how to install' section that uses the Vue3 composition API and TypeScript.

Collapse
 
bcostaaa01 profile image
Bruno

Hey @tempestrock, thank you for your comment and positive feedback, I am happy it helped!๐Ÿ™‚

Thank you for the good point! I will write a separate article on that and add here later to this article ๐Ÿ™‚