Pinia and Nuxt 3

Pinia is now the recommended choice by Vue and is now an official part of the whole Vue ecosystem, maintained and developed by core members of the Vue team

Creating a new project

npx nuxi init nuxt3-pinia

Install pinia

npm i @pinia/nuxt pinia -D

add module to nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    // ...
    '@pinia/nuxt',
  ],
});

Creating a todo store

create store folder in root of project, then create a todos.ts file, we will be calling https://jsonplaceholder.typicode.com/todos this is a mock API which returns a list of todos

Before diving into core concepts, we need to know that a store is defined using defineStore() and that it requires a unique name, passed as the first argument:

store/todos.ts

import { defineStore } from 'pinia';
export const useTodosStore = defineStore('todos', {

});

In Pinia the state is defined as a function that returns the initial state. This allows Pinia to work in both Server and Client Side.

let’s create an empty todos state

store/todos.ts

  state: () => ({
    todos: [],
  }),

Now lets create an action, which will call the endpoint above to fetch a list of todos and assign the data to the todos state

Actions are the equivalent of methods in components. They can be defined with the actions property in defineStore() and they are perfect to define business logic:

store/todos.ts

  async fetchTodos() {
      const { data } = await useFetch('https://jsonplaceholder.typicode.com/todos'); 
      if (data.value) {
        this.todos = data.value;
      }
  }

Nuxt 3 provides new composable called useFetch this will let us do a GET call without having to install axios

the completed code now for store/todos.ts

import { defineStore } from 'pinia';

export const useTodosStore = defineStore('todos', {
  state: () => ({
    todos: [],
  }),
  actions: {
    async fetchTodos() {
      const { data }: any = await useFetch('https://jsonplaceholder.typicode.com/todos');
      if (data.value) {
        this.todos = data.value;
      }
    },
  },
});

How to use the todos store

open app.vue we now need to import our fetchTodos function from the store

import { useTodosStore } from '~/store/todos';

now we need to destrucure our store and call the actions, states we need

const { fetchTodos, todos } = useTodosStore();

because Nuxt 3 supports to level async/await we can just call fetchTodos functions

await fetchTodos();

now on our html can we loop over the todos and display each one

now we should see a list of todos

complete code for app.vue

Alternative away of setting up pinia store

import { defineStore } from 'pinia';

export const useTodosStore = defineStore('todos', () => {
  const todos = ref([]);  // ref by defaults are states,

 // functions get added to actions

  const fetchTodos = async () => { 
    const { data }: any = await useFetch('https://jsonplaceholder.typicode.com/todos');
    if (data.value) {
      todos.value = data.value;
    }
  };

// we must return what we want to use accross the application
  return {
    todos,
    fetchTodos,
  };
});

This way of setting up the store feels very familiar way of creating a composbale in vue

You can find the repository here