--- title: "Nuxt 3: Learn about Pinia setup and basics" description: "Learn about how to integrate Pinia into Nuxt 3. This tutorial covers integration tips and tricks and Pinia basics." date: "2023-06-13T23:23:43.000Z" url: "https://timbenniks.dev/videos/tim/016-zscc8-0-dis" youtube_url: "https://www.youtube.com/watch?v=zsCc8-0-DIs" playlist: "tim" image: "https://i.ytimg.com/vi/zsCc8-0-DIs/maxresdefault.jpg" tags: ["composable-architecture", "frontend", "developer-experience"] --- # Nuxt 3: Learn about Pinia setup and basics Learn about how to integrate Pinia into Nuxt 3. This tutorial covers integration tips and tricks and Pinia basics. Watch on YouTube: https://www.youtube.com/watch?v=zsCc8-0-DIs ## Transcript my name is Tim benck and this is a turbo tutorial in this short tutorial we'll go over how to use paa the State Management tool of few and N we'll do the installation adding a few easy tips and tricks to make working with it better plus we'll go over all the basic features to just show you how you can get started all right let's do this this is a completely clear n 3 installed but I've added the n p module so when you install this module there's a few little things that you can do to n to make working with Pia a lot easier especially something like this so there's an autoimport property in the N Pina module that allows you to automatically import the defined store and a few other functions you might need throughout your n app so you can always use them without having to import very handy in a similar ve you can actually add the store directory to the Imports of n 3 this is the same as like when you put anything in composes your composable just works its automatically imported well I've done the same with the stores folder and in which I I have a bunch of store files for paa and they just work everywhere in nuxn now and so that just helps us a whole bunch um when working with this tool and then lastly when we look at the store itself we'll have a look at what the store is in a second I've added these few lines and so this allow ows vit the the engine that runs the whole thing to understand that if you change anything in your store file that it needs to run a hot module reload and so whatever change is here updates on the screen directly no refresh needed really handy stuff all right so let's go over the store that I've created and I've kept it very simple because this is a basic tutorial to just get you going and so um I've used the name use friends store I love the def show Friends um if you don't know know it or you're too young go to Netflix and check it out it's really fun and so um I've added the state here and so the the the heart of a state management tool like paa of course is the state this is where everything happens and so the basics of the data that we're dealing with are in the state and in this case these are the characters we have Rachel and Ross breaking up iconic scene and so you can do an action from elsewhere to update whatever Happ happens in this state or you can do a getter to get anything from that state specifically if you want to like have to find the name and then based on that get back let's say the lineer that they're saying because if it's literally just one item that you're getting from the state you can do that directly you can access the state from your code and just get it but if you have to find something or manipulate something to get the data you use a getter that's what we're doing here all right so how is all this actually working in the browser well first of of all I made a little component called lines. view because we're speaking lines right we're characters and so I've actually done use friends store because of the setup we did in the next module we can actually just use this and it just works and so I'm grabbing the characters from that store through the stores to ra um function and that is a very handy helper function that whatever you grab from the state it makes it into a ra Infuse so it's reactive so if the state now Chang it directly updates in the browser and so we're grabbing the characters from the state and just putting it in a pre-ex so you can see that and let me just refresh this okay here we go so it's back to the original state so we have re we have Rachel and Ross anyways now we have things like actions and Getters and so let's first add an action to be able to add something to this state and so if you have oh the key night among you have seen I have a add character function so it adds a name and a line that the the character is saying so it's literally just grabbing the character State and pushing a new object in it and so um let's add that to our code so first of all we need a function to be able to add something to the state and in this case this we're going to add Joey because he's also yet another iconic um character from the show and of course we need a button to be able to do that so let's put that here and so now when we click this button it adds Joey with the name and his line well you see because of the auto um HMR and all the fun stuff that we added on the in the intro here this just Auto updated and so let me just click Joey and suddenly the state is updated and now we have Joey here and that just worked really really simply and so what we can do now is also use the getter to get some specific information out and so what we can do is potentially only only get um Rachel's line so let's just add an our getter because that's like our get line by name function we have a look here get line by name so I'm just searching for the name inside the characters right and when the character name that is searching in has the name that I'm giving the function it Returns the line in real life you might be a little bit more defensive with this code but this is for an example and so when we actually want to see Rachel here um let's just go here line now we should just see Rachel's line and there we go so we can also go for just Ross's line and there we go that's all I wanted to show you about paa feel free to add any questions in the comments and happy coding cheers [Music]