WEBVTT

00:00:06.220 --> 00:00:07.300 
Hi, everyone.

00:00:07.300 --> 00:00:12.683 align:center
Welcome to the first Q&A session we are doing with Eduardo

00:00:12.683 --> 00:00:18.130 align:center
San Martín Morote, the author of Pinia and Vue Router, and

00:00:18.130 --> 00:00:20.760 align:center
the Mastering Pinia course.

00:00:20.760 --> 00:00:25.060 align:center
I hope everyone can see me and hear me well.

00:00:25.060 --> 00:00:30.140 align:center
Well, first of all, let me tell you how happy we are to

00:00:30.140 --> 00:00:32.080 align:center
have you here today.

00:00:32.080 --> 00:00:34.560 align:center
A big thank you to everyone who joined.

00:00:34.560 --> 00:00:37.949 align:center
We see that you are joining from all around the world,

00:00:37.949 --> 00:00:39.770 align:center
which is so exciting to see.

00:00:39.770 --> 00:00:44.436 align:center
I saw someone from Sydney where it's like midnight, so cool

00:00:44.436 --> 00:00:45.859 align:center
to have you here.

00:00:45.859 --> 00:00:48.740 align:center
Let me start with introducing myself.

00:00:48.740 --> 00:00:50.140 align:center
I am Ana Marija Majkić

00:00:51.020 --> 00:00:54.621 align:center
and I will be your host of the session today together with

00:00:54.621 --> 00:00:55.179 align:center
Eduardo.

00:00:55.179 --> 00:00:58.432 align:center
I am the community manager of Vue School and you have

00:00:58.432 --> 00:01:01.968 align:center
probably seen me in our Discord servers talking about all

00:01:01.968 --> 00:01:04.140 align:center
of our events we do at Vue School.

00:01:04.140 --> 00:01:09.419 align:center
So if there are any familiar faces, feel free to say hi!

00:01:09.419 --> 00:01:14.112 align:center
Before we jump into today's questions, let me just quickly

00:01:14.112 --> 00:01:16.619 align:center
go over the program for today.

00:01:17.339 --> 00:01:20.908 align:center
We received such a huge number of questions from all of

00:01:20.908 --> 00:01:23.179 align:center
you, so a huge thank you for that.

00:01:23.819 --> 00:01:26.951 align:center
There will be so many exciting ones we will get to cover

00:01:26.951 --> 00:01:30.122 align:center
today, but if there are any that are left that we cannot

00:01:30.122 --> 00:01:31.425 align:center
cover today, fear not!

00:01:31.425 --> 00:01:36.350 align:center
We are going to do more of these Q&A sessions, so we will

00:01:36.350 --> 00:01:39.030 align:center
try and get as many as we can.

00:01:39.030 --> 00:01:42.823 align:center
Before we get Eduardo to the stage, I would love to

00:01:42.823 --> 00:01:44.459 align:center
introduce him to you.

00:01:44.459 --> 00:01:49.020 align:center
You are probably already aware, but some of you may not be.

00:01:49.020 --> 00:01:51.755 align:center
Eduardo is, like I said, the author of some of your

00:01:51.755 --> 00:01:53.955 align:center
favorite libraries out there for Vue.js,

00:01:53.955 --> 00:01:58.890 align:center
like Vue Router and Pinia and also Vue Fire.

00:01:58.890 --> 00:02:03.529 align:center
He is also the instructor of the Mastering Pinia course. He

00:02:03.529 --> 00:02:08.227 align:center
is one of the community's favorite Vue.js core team members

00:02:08.227 --> 00:02:09.819 align:center
and an opensourcer,

00:02:09.819 --> 00:02:14.591 align:center
and we are pretty sure that he is one of the people you

00:02:14.591 --> 00:02:19.518 align:center
admire and are inspired by when working with your Vue.js

00:02:19.518 --> 00:02:20.750 align:center
applications.

00:02:20.750 --> 00:02:27.019 align:center
So without further ado, let me bring Eduardo to the stage.

00:02:28.220 --> 00:02:31.897 align:center
Hey. Hi, everyone. Thanks for the very warm introduction,

00:02:31.897 --> 00:02:32.220 align:center
Ana.

00:02:32.940 --> 00:02:33.500 align:center
Hi, Eduardo.

00:02:33.500 --> 00:02:34.620 align:center
Good to see you.

00:02:34.620 --> 00:02:36.019 align:center
How are you doing today?

00:02:36.139 --> 00:02:37.039 align:center
You too.

00:02:37.039 --> 00:02:37.940 align:center
Good, good.

00:02:37.940 --> 00:02:39.289 align:center
A good day.

00:02:39.289 --> 00:02:40.639 align:center
Super to hear.

00:02:40.639 --> 00:02:45.550 align:center
Okay, so we have many questions to cover today, so let's

00:02:45.550 --> 00:02:47.479 align:center
jump right into them.

00:02:47.479 --> 00:02:52.415 align:center
The first being one that is very interesting, that says,

00:02:52.415 --> 00:02:57.407 align:center
what motivates you to create Pinia? Yeah, so this one is

00:02:57.407 --> 00:03:00.259 align:center
now very, it's quite a far now.

00:03:00.259 --> 00:03:02.900 align:center
It's been three, four, four years.

00:03:02.900 --> 00:03:06.956 align:center
This year, Pinia is going to be four years old, and I

00:03:06.956 --> 00:03:11.492 align:center
created it because at the time, I had been using TypeScript

00:03:11.492 --> 00:03:16.059 align:center
for a long, for a few years, or one year, or two years, and

00:03:16.059 --> 00:03:20.675 align:center
I was experiencing the pain of working with Vuex, with Vue,

00:03:20.675 --> 00:03:23.180 align:center
and terrible typing experience,

00:03:23.739 --> 00:03:26.819 align:center
and I wanted to have something that was simpler than Vuex.

00:03:26.819 --> 00:03:30.981 align:center
I wanted to get rid of mutations, having something that was

00:03:30.981 --> 00:03:34.744 align:center
more up to the standards of what we had at that time,

00:03:34.744 --> 00:03:38.692 align:center
because Vuex was getting a little bit old, but the main

00:03:38.692 --> 00:03:41.420 align:center
motivation was definitely TypeScript.

00:03:43.019 --> 00:03:48.099 align:center
Interesting, and happy soon birthday to Pinia. Four years.

00:03:48.099 --> 00:03:51.340 align:center
Wow. Passed so quickly, right? Yeah.

00:03:51.340 --> 00:03:53.380 align:center
Okay, the next one.

00:03:53.380 --> 00:03:57.519 align:center
What suggestions do you have around combining stores and

00:03:57.519 --> 00:03:58.479 align:center
performance?

00:03:58.539 --> 00:04:01.340 align:center
And this is coming from a React dev.

00:04:01.340 --> 00:04:04.364 align:center
Interesting. Yeah, this is something we see often from

00:04:04.364 --> 00:04:05.819 align:center
people coming from React.

00:04:05.819 --> 00:04:09.595 align:center
I've seen often, oh, they try to compare Redux, and I think

00:04:09.595 --> 00:04:10.299 align:center
that they,

00:04:12.539 --> 00:04:17.162 align:center
I know that in Redux and React, of course, both at the same

00:04:17.162 --> 00:04:20.140 align:center
time, you had to do some shenanigans,

00:04:20.780 --> 00:04:24.534 align:center
or you have to be careful about some patterns that could be

00:04:24.534 --> 00:04:28.188 align:center
very, very harmful in terms of performance, but this with

00:04:28.188 --> 00:04:31.433 align:center
Vue, in general, is not a concern, and with Pinia,

00:04:31.433 --> 00:04:33.379 align:center
definitely, is not a concern.

00:04:33.379 --> 00:04:34.830 align:center
You just use it normally.

00:04:34.830 --> 00:04:37.439 align:center
You don't have to worry about anything specific in

00:04:37.499 --> 00:04:41.051 align:center
Pinia. If anything, you have to worry about huge data

00:04:41.051 --> 00:04:44.795 align:center
collections, the same way you would worry about them in

00:04:44.795 --> 00:04:45.340 align:center
Vue.js.

00:04:45.340 --> 00:04:49.720 align:center
You have to, well, you cannot just display 20,000 rows on a

00:04:49.720 --> 00:04:53.729 align:center
page, and expect it to be as fluid as having just 20.

00:04:53.729 --> 00:04:56.049 align:center
You have to do some virtual list, etc.

00:04:56.049 --> 00:04:59.041 align:center
So, yeah, there are some other things that you can do, but

00:04:59.041 --> 00:05:01.260 align:center
it's not directly connected to the stores.

00:05:03.260 --> 00:05:04.039 align:center
Yeah, makes sense.

00:05:04.039 --> 00:05:06.900 align:center
So, the suggestion is not to worry too much about it.

00:05:06.900 --> 00:05:08.379 align:center
Use it as you would use

00:05:08.379 --> 00:05:11.799 align:center
Vue, and it should work out.

00:05:11.799 --> 00:05:15.869 align:center
Okay. The next one says, can you name a few well-known open

00:05:15.869 --> 00:05:19.827 align:center
source projects that use Pinia to the full extent that we

00:05:19.827 --> 00:05:23.824 align:center
can all learn from? Yeah, I don't have a few. I have one,

00:05:23.824 --> 00:05:26.700 align:center
because it's just too hard to find them.

00:05:29.229 --> 00:05:32.721 align:center
So, if they don't come to me, and they tell me, hey, we

00:05:32.721 --> 00:05:36.446 align:center
built this using Pinia, I just won't be able to find them,

00:05:36.446 --> 00:05:38.179 align:center
except by chance, by luck.

00:05:38.220 --> 00:05:43.034 align:center
The one I found is Directus, which I don't even remember

00:05:43.034 --> 00:05:48.020 align:center
what it was, but they were a very early adopter of Pinia.

00:05:48.020 --> 00:05:50.749 align:center
That's why I remember them as well.

00:05:50.749 --> 00:05:54.020 align:center
They're definitely helping the design of the API.

00:05:54.020 --> 00:05:58.308 align:center
Awesome. So, definitely check out Directus, then, to see

00:05:58.308 --> 00:05:59.609 align:center
how they use it.

00:06:01.419 --> 00:06:05.252 align:center
Are people using Pinia the way you intended them to use it,

00:06:05.252 --> 00:06:08.850 align:center
or are you enjoying seeing different ways people engage

00:06:08.850 --> 00:06:12.756 align:center
with Pinia? Would you rather them not experiment and follow

00:06:12.756 --> 00:06:14.280 align:center
standardized patterns?

00:06:15.179 --> 00:06:17.902 align:center
No, I think it's always really nice to see people

00:06:17.902 --> 00:06:19.679 align:center
experiment with what you build.

00:06:19.679 --> 00:06:22.100 align:center
I have that way of working with stuff.

00:06:22.100 --> 00:06:25.205 align:center
I like to, especially in computer science, I like to break

00:06:25.205 --> 00:06:25.580 align:center
stuff.

00:06:25.580 --> 00:06:29.148 align:center
So, I try to break things apart from other people and see

00:06:29.148 --> 00:06:30.150 align:center
what we can do.

00:06:30.150 --> 00:06:31.260 align:center
I think it's sometimes

00:06:32.379 --> 00:06:35.630 align:center
an opening to see how people approach the problem

00:06:35.630 --> 00:06:37.820 align:center
differently from the way you do.

00:06:38.780 --> 00:06:42.448 align:center
And so, it's really a rich experience to be able to see

00:06:42.448 --> 00:06:45.049 align:center
that, especially on a tool you design.

00:06:45.049 --> 00:06:48.720 align:center
So, you have your approach in mind, because you design it.

00:06:48.720 --> 00:06:50.700 align:center
I design it for myself first,

00:06:51.660 --> 00:06:56.707 align:center
and then I open it up and accept feedback, because I want

00:06:56.707 --> 00:07:02.020 align:center
to make it more general and more people to benefit from it.

00:07:02.020 --> 00:07:07.559 align:center
And I think that Pinia has a small enough surface API to be

00:07:07.559 --> 00:07:09.249 align:center
used pretty well.

00:07:09.249 --> 00:07:12.140 align:center
There are a few things that I think could be improved,

00:07:12.780 --> 00:07:14.780 align:center
but it doesn't bother me, so to say.

00:07:14.780 --> 00:07:17.530 align:center
It's just I want to help the people to understand why

00:07:18.539 --> 00:07:21.398 align:center
some specific ways of using are not that great and can be

00:07:21.398 --> 00:07:21.900 align:center
improved.

00:07:22.780 --> 00:07:25.749 align:center
But I'm still happy about it, to be honest.

00:07:25.749 --> 00:07:27.729 align:center
And making it more accessible, right?

00:07:29.100 --> 00:07:34.540 align:center
Yes. To work well out of the box would be the best, right?

00:07:35.580 --> 00:07:36.359 align:center
Nice. Okay.

00:07:36.359 --> 00:07:39.090 align:center
Let's see what the next one says.

00:07:39.090 --> 00:07:40.535 align:center
What features are planned in the long term for Pinia? For

00:07:40.535 --> 00:07:41.949 align:center
Pinia itself, there are no features planned in the long

00:07:41.949 --> 00:07:42.540 align:center
term. Pinia is stable.

00:07:49.340 --> 00:07:53.547 align:center
If anything, it's ensure that it works well, unless there

00:07:53.547 --> 00:07:58.049 align:center
are new APIs to JavaScript as a language or to the DevTools.

00:07:58.049 --> 00:08:02.129 align:center
But the core of the library, it's complete.

00:08:02.129 --> 00:08:05.811 align:center
And I think that unless we find pitfalls of things that

00:08:05.811 --> 00:08:09.721 align:center
cannot be implemented with plugins or bugs, there will not

00:08:09.721 --> 00:08:13.680 align:center
be new features, because they should be solving a problem,

00:08:13.680 --> 00:08:15.249 align:center
not creating new ones.

00:08:17.660 --> 00:08:21.626 align:center
Interesting angle. Okay. So, I see that we have some

00:08:21.626 --> 00:08:24.220 align:center
technical questions here as well.

00:08:24.939 --> 00:08:30.059 align:center
How can I store data directly from an API into Pinia?

00:08:31.499 --> 00:08:33.119 align:center
So, yeah, this happens very often.

00:08:33.119 --> 00:08:37.279 align:center
The thing I don't really like about this question is that

00:08:37.279 --> 00:08:41.729 align:center
it really depends a lot on where and how you fetch the data.

00:08:41.729 --> 00:08:44.820 align:center
Sometimes you shouldn't be storing it in Pinia.

00:08:44.820 --> 00:08:49.171 align:center
For example, if you are using GraphQL or something like a

00:08:49.171 --> 00:08:53.018 align:center
GraphQL client like Apollo or Firebase or probably

00:08:53.018 --> 00:08:57.383 align:center
Supabase, they kind of replace the role of the store for

00:08:57.383 --> 00:08:59.019 align:center
the state, at least.

00:08:59.019 --> 00:09:03.258 align:center
So, you would only use it on the store in order to do other

00:09:03.258 --> 00:09:04.119 align:center
operations.

00:09:04.119 --> 00:09:06.259 align:center
But you won't define it as state.

00:09:06.259 --> 00:09:09.411 align:center
Now, that's a bit more technical, so we won't get into the

00:09:09.411 --> 00:09:09.899 align:center
details.

00:09:09.979 --> 00:09:12.854 align:center
But in other scenarios, like the classic ones where you

00:09:12.854 --> 00:09:14.840 align:center
have a fetch, you just have a regular

00:09:14.940 --> 00:09:19.267 align:center
CRUD API, you get something from an API with fetch or

00:09:19.267 --> 00:09:21.389 align:center
Axios, whatever you want.

00:09:21.389 --> 00:09:24.139 align:center
Well, usually you call that in action.

00:09:24.139 --> 00:09:27.973 align:center
And you ensure that that action is called anywhere in your

00:09:27.973 --> 00:09:28.700 align:center
component,

00:09:29.580 --> 00:09:32.220 align:center
so you can control the timing of the fetching as well.

00:09:32.220 --> 00:09:34.978 align:center
And usually the state of the fetching, is it finished, did

00:09:34.978 --> 00:09:36.499 align:center
it error, et cetera, et cetera.

00:09:36.499 --> 00:09:39.802 align:center
And there are many ways afterwards also, of course, to

00:09:39.802 --> 00:09:42.859 align:center
globalize that loading state, the error handling.

00:09:42.859 --> 00:09:48.979 align:center
But that would be too much to show and to speak about.

00:09:48.979 --> 00:09:52.409 align:center
I'll hold another session with that one.

00:09:53.499 --> 00:09:56.019 align:center
Yeah. It's something we call error.

00:09:56.019 --> 00:09:56.859 align:center
Yeah. Okay.

00:09:56.859 --> 00:09:57.700 align:center
Let's see.

00:09:57.700 --> 00:09:58.960 align:center
The next one.

00:10:00.100 --> 00:10:03.380 align:center
Using Composition API, what is the best way to write the

00:10:03.380 --> 00:10:06.391 align:center
store for a full-scale production website? Getters,

00:10:06.391 --> 00:10:09.922 align:center
setters, and what is the best practice of calling the store

00:10:09.922 --> 00:10:10.820 align:center
in components?

00:10:12.340 --> 00:10:16.787 align:center
I think the question here is referring to, since they are

00:10:16.787 --> 00:10:21.440 align:center
mentioning setters, I suppose they are referring to the way

00:10:21.440 --> 00:10:24.200 align:center
the API of the store is reflected.

00:10:24.200 --> 00:10:27.800 align:center
So, for example, you have some state user.

00:10:27.800 --> 00:10:31.517 align:center
Do you create a setter, set user? Do you create a getter,

00:10:31.517 --> 00:10:33.539 align:center
get user? Something like that.

00:10:34.259 --> 00:10:38.689 align:center
So, the answer is way more subtle and complicated, but I'm

00:10:38.689 --> 00:10:40.979 align:center
going to try to summarize it.

00:10:43.300 --> 00:10:45.960 align:center
In Vuex, it was already the case.

00:10:45.960 --> 00:10:49.379 align:center
You didn't need to create getters for a state.

00:10:49.379 --> 00:10:51.279 align:center
A getter has to be

00:10:52.019 --> 00:10:53.249 align:center
a computer property.

00:10:53.249 --> 00:10:55.300 align:center
It has to create something.

00:10:55.300 --> 00:10:57.350 align:center
It has to derive state.

00:10:57.350 --> 00:11:00.060 align:center
It's not meant to just return something.

00:11:00.060 --> 00:11:03.153 align:center
You don't need setters in Pinia, for sure, and you

00:11:03.153 --> 00:11:05.379 align:center
shouldn't create a setter in Pinia.

00:11:05.379 --> 00:11:08.897 align:center
By setter, I really mean a function that just does one

00:11:08.897 --> 00:11:12.479 align:center
operation, which is setting a property to a new value.

00:11:12.479 --> 00:11:15.440 align:center
This is, most of the time, pretty useless.

00:11:15.440 --> 00:11:21.526 align:center
In very few cases, they add a business meaning, and what I

00:11:21.526 --> 00:11:23.519 align:center
think makes stores

00:11:24.979 --> 00:11:28.260 align:center
more scalable or more maintainable is giving every single

00:11:28.260 --> 00:11:31.510 align:center
piece of API, every single piece of property you have in

00:11:31.510 --> 00:11:34.868 align:center
the store, a business meaning, meaning that you should be

00:11:34.868 --> 00:11:35.340 align:center
able to

00:11:37.060 --> 00:11:40.324 align:center
find within a store, for example, the logic that is

00:11:40.324 --> 00:11:43.460 align:center
relative to some authentication or maybe to some

00:11:44.100 --> 00:11:47.746 align:center
statistics computation or some table computation, and

00:11:47.746 --> 00:11:51.281 align:center
sometimes you have actions that are going to modify

00:11:51.281 --> 00:11:55.347 align:center
multiple pieces of the state, and you could do that within

00:11:55.347 --> 00:11:57.379 align:center
the component, but sometimes

00:11:58.899 --> 00:12:02.692 align:center
multiple, like changing multiple state properties at the

00:12:02.692 --> 00:12:06.350 align:center
same time, you can assign a business meaning to that.

00:12:06.350 --> 00:12:09.536 align:center
For example, you can name it with words, add to cart, empty

00:12:09.536 --> 00:12:09.859 align:center
cart.

00:12:09.859 --> 00:12:13.214 align:center
Sometimes you modify multiple pieces of state, and I think

00:12:13.214 --> 00:12:15.989 align:center
that in those cases, if you manage to have that

00:12:16.820 --> 00:12:20.485 align:center
business meaning in your store and not just think that are

00:12:20.485 --> 00:12:24.034 align:center
just called set or set and then the property name of the

00:12:24.034 --> 00:12:27.721 align:center
store, then you're reaching a more maintainable store that

00:12:27.721 --> 00:12:31.231 align:center
will scale in your application, and then the last small

00:12:31.231 --> 00:12:34.566 align:center
question is what is the best practice of calling the

00:12:34.566 --> 00:12:38.375 align:center
storing components? You just use the store, call the store,

00:12:38.375 --> 00:12:42.161 align:center
you store, and then store something, store that something,

00:12:42.161 --> 00:12:44.249 align:center
and then there are other cases.

00:12:44.249 --> 00:12:45.800 align:center
This is very broad question.

00:12:47.700 --> 00:12:49.850 align:center
Thank you for explaining that.

00:12:49.850 --> 00:12:51.139 align:center
Okay, let's see.

00:12:51.139 --> 00:12:54.834 align:center
I think this one is connected to the globalized loading

00:12:54.834 --> 00:12:58.586 align:center
state you mentioned would be a part of the Pinia store,

00:12:58.586 --> 00:12:59.200 align:center
correct?

00:13:00.100 --> 00:13:04.820 align:center
The globalized loading state. Yes.

00:13:08.100 --> 00:13:10.300 align:center
Is that a question? Is that something from the chat, right?

00:13:12.340 --> 00:13:16.329 align:center
Yes. Yes, the loading state will be part of the store if we

00:13:16.329 --> 00:13:20.216 align:center
want to handle that globally instead of being just in the

00:13:20.216 --> 00:13:24.302 align:center
component where we call the action and we can get access to

00:13:24.302 --> 00:13:24.579 align:center
the

00:13:25.460 --> 00:13:27.359 align:center
promise returned by an action.

00:13:27.359 --> 00:13:30.399 align:center
You have the flexibility of doing different ways.

00:13:30.399 --> 00:13:32.616 align:center
Now, it gets way more complicated, of course, and that's

00:13:32.616 --> 00:13:34.119 align:center
why you have libraries like Vue Query

00:13:35.060 --> 00:13:40.019 align:center
that handle way more, way, way, way more, many more things.

00:13:42.580 --> 00:13:46.993 align:center
Okay, thank you for that and for the follow-up question.

00:13:46.993 --> 00:13:47.859 align:center
Let's see.

00:13:48.820 --> 00:13:53.219 align:center
How to implement an application with auth with Pinia?

00:13:54.019 --> 00:13:57.289 align:center
Yeah, this comes up very often, actually, but the thing is

00:13:57.289 --> 00:13:58.980 align:center
there is no one single way of

00:13:59.940 --> 00:14:02.472 align:center
authentication with Pinia because it depends so much on the

00:14:02.472 --> 00:14:03.460 align:center
provider you're using.

00:14:04.019 --> 00:14:08.975 align:center
And so the real question is what part do you connect to

00:14:08.975 --> 00:14:14.331 align:center
Pinia? Even in these scenarios, it depends on the provider,

00:14:14.331 --> 00:14:19.114 align:center
but usually the providers, they have their own state

00:14:19.114 --> 00:14:21.229 align:center
handling for the user.

00:14:21.229 --> 00:14:24.379 align:center
So you only consume the user in a store.

00:14:24.379 --> 00:14:28.807 align:center
And if you want, if it makes sense, you can create maybe

00:14:28.807 --> 00:14:33.502 align:center
getters that derive state from the user information and add

00:14:33.502 --> 00:14:38.004 align:center
some actions that are going to call the APIs for logging

00:14:38.004 --> 00:14:41.300 align:center
in, opening a pop-up or changing images.

00:14:41.300 --> 00:14:46.496 align:center
So you're abstracting the authentication part even though

00:14:46.496 --> 00:14:49.139 align:center
it's using another provider.

00:14:49.700 --> 00:14:52.621 align:center
Personally, I don't always create a store for

00:14:52.621 --> 00:14:53.659 align:center
authentication.

00:14:53.659 --> 00:14:56.740 align:center
For example, if I have a Vue Fire application with

00:14:56.740 --> 00:15:00.277 align:center
Firebase, I usually don't need a store for authentication

00:15:00.277 --> 00:15:03.794 align:center
because everything is handled easily with some functions

00:15:03.794 --> 00:15:05.489 align:center
from the Firebase package.

00:15:05.489 --> 00:15:09.828 align:center
But if I write my own sign-in with GitHub, I will have a

00:15:09.828 --> 00:15:13.779 align:center
store for that and then store the user there, etc.

00:15:13.779 --> 00:15:17.073 align:center
Because I'm doing things by hand, right? I'm not using an

00:15:17.073 --> 00:15:20.020 align:center
all-batteries-included library for authentication.

00:15:20.979 --> 00:15:24.416 align:center
I hope that answers the question. Thanks. Thanks for

00:15:24.416 --> 00:15:25.540 align:center
explaining that.

00:15:27.139 --> 00:15:30.083 align:center
Okay, let's see the next question. The next one is actually

00:15:30.083 --> 00:15:31.779 align:center
about the Mastering Pinia course.

00:15:32.580 --> 00:15:36.521 align:center
Is the Mastering Pinia course intended more for beginners

00:15:36.521 --> 00:15:40.073 align:center
or also for Pinia users to acquire deeper technical

00:15:40.073 --> 00:15:44.227 align:center
knowledge? I would say it's intended for people who have at

00:15:44.227 --> 00:15:46.479 align:center
least some experience with Vue.

00:15:46.479 --> 00:15:48.930 align:center
They have created some applications with Vue.

00:15:48.930 --> 00:15:53.864 align:center
It doesn't matter if they have experience with Pinia or not

00:15:53.864 --> 00:15:58.620 align:center
because we cover everything in the course, but we go way

00:15:58.620 --> 00:15:59.300 align:center
deeper.

00:15:59.300 --> 00:16:02.429 align:center
So I think that for someone who is a total beginner, like

00:16:02.429 --> 00:16:05.415 align:center
they are starting new with Vue, it will be too hard to

00:16:05.415 --> 00:16:08.441 align:center
start with that with Mastering Pinia and definitely be

00:16:08.441 --> 00:16:09.729 align:center
discouraging for them.

00:16:09.729 --> 00:16:14.087 align:center
They should first do some Vue.js and web development and

00:16:14.087 --> 00:16:16.499 align:center
then come to the Pinia course.

00:16:16.499 --> 00:16:19.149 align:center
Otherwise, it's going to feel too challenging.

00:16:19.149 --> 00:16:24.640 align:center
It's more targeted to people who have at least, I said, a

00:16:24.640 --> 00:16:30.073 align:center
year or more of experience because some of the exercises

00:16:30.073 --> 00:16:34.788 align:center
really push the knowledge of our structure, some

00:16:34.788 --> 00:16:38.029 align:center
architecture, and Vue.js itself.

00:16:38.029 --> 00:16:42.907 align:center
Okay, from the live chat here we have, what makes you

00:16:42.907 --> 00:16:48.091 align:center
decide to go for a Pinia module instead of a composable?

00:16:48.091 --> 00:16:53.509 align:center
This is basically the idea of when should you use a store,

00:16:53.509 --> 00:16:58.460 align:center
right? It's one of the most asked questions as well.

00:16:58.460 --> 00:17:02.283 align:center
It's not always that evident, to be honest, but usually

00:17:02.283 --> 00:17:05.619 align:center
it's a global state that you need across pages.

00:17:05.619 --> 00:17:09.239 align:center
A composable, it's usually within the lifespan of a

00:17:09.239 --> 00:17:10.020 align:center
component.

00:17:10.020 --> 00:17:13.524 align:center
Now, that lifespan can be a page, can be also a component

00:17:13.524 --> 00:17:17.192 align:center
that appears and disappears within a page, so it's way more

00:17:17.192 --> 00:17:19.119 align:center
flexible in terms of lifespan.

00:17:19.119 --> 00:17:22.980 align:center
But a Pinia module or a store, because PINIA doesn't have

00:17:22.980 --> 00:17:25.689 align:center
modules, only stores, it's just global.

00:17:25.689 --> 00:17:29.851 align:center
So once it's instantiated, it's always there until you

00:17:29.851 --> 00:17:34.077 align:center
manually dispose it, which usually you don't, but it's

00:17:34.077 --> 00:17:34.859 align:center
possible.

00:17:34.859 --> 00:17:38.548 align:center
So then you have to ask yourself the questions of, is this

00:17:38.548 --> 00:17:42.321 align:center
something I need on every page? Is this something I'm going

00:17:42.321 --> 00:17:45.675 align:center
to need across some pages? And that's what makes the

00:17:45.675 --> 00:17:49.274 align:center
difference between usually going for a Pinia store or a

00:17:49.274 --> 00:17:50.060 align:center
composable.

00:17:50.060 --> 00:17:54.609 align:center
So I have to say that I go for composables way more often.

00:17:54.609 --> 00:17:57.759 align:center
You should try, you should aim to go for composables more

00:17:57.759 --> 00:18:01.006 align:center
often because usually you want to encapsulate the behavior

00:18:01.006 --> 00:18:02.070 align:center
within components.

00:18:02.070 --> 00:18:06.077 align:center
You have a lot of behavior in client-side applications that

00:18:06.077 --> 00:18:09.270 align:center
is part of just the interactivity on the page.

00:18:09.270 --> 00:18:14.032 align:center
So usually that can be solved with just a composable and

00:18:14.032 --> 00:18:18.943 align:center
it's easier to handle at all the levels, like testing and

00:18:18.943 --> 00:18:20.580 align:center
just sharing, etc.

00:18:22.899 --> 00:18:24.520 align:center
Okay, thank you.

00:18:24.520 --> 00:18:26.679 align:center
Let's see, next question.

00:18:26.679 --> 00:18:31.250 align:center
Is there a functionality to have a persistent state even on

00:18:31.250 --> 00:18:35.810 align:center
page refresh? So this is something that you achieve with a

00:18:35.810 --> 00:18:36.439 align:center
plugin.

00:18:36.439 --> 00:18:38.100 align:center
You have a Pinia state,

00:18:38.820 --> 00:18:40.719 align:center
persistent state, I think, plugin.

00:18:40.719 --> 00:18:44.187 align:center
It's not something that comes by default with Pinia because

00:18:44.187 --> 00:18:45.480 align:center
it will be too heavy.

00:18:45.480 --> 00:18:47.842 align:center
It's probably like three or five times the size of Pinia

00:18:47.842 --> 00:18:48.180 align:center
itself,

00:18:49.859 --> 00:18:52.967 align:center
depending on how you persist the state, but you need an

00:18:52.967 --> 00:18:54.209 align:center
extra package for it.

00:18:54.209 --> 00:18:55.369 align:center
It's not part of

00:18:55.379 --> 00:18:56.699 align:center
Pinia core.

00:18:56.699 --> 00:19:00.000 align:center
Okay, let's see, next question.

00:19:00.000 --> 00:19:05.512 align:center
The best way to test Pinia stores, avoiding implementation

00:19:05.512 --> 00:19:10.906 align:center
details as much as possible? I would say focusing on the

00:19:10.906 --> 00:19:12.639 align:center
business meaning.

00:19:14.820 --> 00:19:18.997 align:center
So you can unit test Pinia stores very easily because they

00:19:18.997 --> 00:19:20.149 align:center
are composable.

00:19:20.149 --> 00:19:23.462 align:center
So you just call the Pinia store and then call the

00:19:23.462 --> 00:19:26.829 align:center
functions and test the state and the return of the

00:19:26.829 --> 00:19:27.570 align:center
functions.

00:19:27.619 --> 00:19:30.430 align:center
It's pretty much like testing a service in any other

00:19:30.430 --> 00:19:31.619 align:center
programming language.

00:19:32.419 --> 00:19:37.859 align:center
In that case, the implementation details...

00:19:40.340 --> 00:19:42.789 align:center
So the way you avoid implementation details completely

00:19:42.789 --> 00:19:44.830 align:center
depends on the implementation detail itself.

00:19:44.830 --> 00:19:47.770 align:center
That's just the pain of testing.

00:19:47.770 --> 00:19:51.264 align:center
For example, if you want to avoid testing the

00:19:51.264 --> 00:19:55.894 align:center
implementation detail of an API, well, you have to mock the

00:19:55.894 --> 00:19:58.719 align:center
API with something like the mock...

00:19:58.740 --> 00:19:59.943 align:center
It was... MSW or something like that, there is a package

00:19:59.943 --> 00:20:00.179 align:center
like that.

00:20:04.100 --> 00:20:08.307 align:center
If you're using something like Firebase, you probably want

00:20:08.307 --> 00:20:12.395 align:center
to mock to use an emulator for the Firebase API calls or

00:20:12.395 --> 00:20:16.227 align:center
the idea is to, in my opinion, for testing to find a

00:20:16.227 --> 00:20:20.060 align:center
pragmatic way to get reliable results when testing.

00:20:20.100 --> 00:20:24.381 align:center
But it's very often hard to find, I mean, it's impossible

00:20:24.381 --> 00:20:28.312 align:center
to find a generic way to avoid implementation detail

00:20:28.312 --> 00:20:32.664 align:center
without creating extra layers of complexity that are just

00:20:32.664 --> 00:20:36.100 align:center
going to get in the way of your development.

00:20:36.100 --> 00:20:39.769 align:center
So I'm thinking of creating an extra layer for the fetching

00:20:39.769 --> 00:20:43.428 align:center
and then you just mock the JavaScript module that does the

00:20:43.428 --> 00:20:44.060 align:center
fetching.

00:20:44.100 --> 00:20:46.578 align:center
That's another way of avoiding the implementation detail,

00:20:46.578 --> 00:20:48.100 align:center
but I wouldn't do that personally.

00:20:48.100 --> 00:20:53.463 align:center
Yeah, and someone share, Elise share on the chat the actual

00:20:53.463 --> 00:20:56.100 align:center
library I was talking about.

00:20:56.100 --> 00:20:57.810 align:center
Nice, thank you.

00:20:57.810 --> 00:21:01.899 align:center
And we actually have a follow-up question from chat.

00:21:01.899 --> 00:21:07.300 align:center
How could I mock a store imported in a component using

00:21:07.300 --> 00:21:08.100 align:center
Vitest?

00:21:08.100 --> 00:21:10.978 align:center
So we actually have a package for that Pinia testing and

00:21:10.978 --> 00:21:13.959 align:center
there is a whole page in the documentation explaining it.

00:21:13.959 --> 00:21:17.419 align:center
I think I won't bother to go into more details.

00:21:17.419 --> 00:21:22.271 align:center
Just start testing the PNIA documentation and you will find

00:21:22.271 --> 00:21:22.600 align:center
it.

00:21:22.600 --> 00:21:24.100 align:center
Awesome, thank you.

00:21:24.100 --> 00:21:28.100 align:center
Okay, let's see our next question.

00:21:28.100 --> 00:21:31.822 align:center
Composition stores seem to add way more flexibility than

00:21:31.822 --> 00:21:32.820 align:center
option stores.

00:21:32.820 --> 00:21:36.540 align:center
The ability to use watchers and access the route router.

00:21:36.540 --> 00:21:42.610 align:center
Are there any advantages that option stores have over

00:21:42.610 --> 00:21:44.100 align:center
composition?

00:21:44.100 --> 00:21:45.699 align:center
They have small advantages.

00:21:45.699 --> 00:21:51.176 align:center
I don't think they are worth the, or in other words, I

00:21:51.176 --> 00:21:57.022 align:center
don't think the advantages are at the same level as setup

00:21:57.022 --> 00:22:00.100 align:center
stores or composition stores.

00:22:00.100 --> 00:22:04.959 align:center
So the advantages are mostly debugging and the fact that

00:22:04.959 --> 00:22:09.498 align:center
because we're using objects to define everything, so

00:22:09.498 --> 00:22:14.339 align:center
actions, getters and state, you have an automatic reset

00:22:14.339 --> 00:22:19.166 align:center
function, for example, because it just calls the state

00:22:19.166 --> 00:22:20.060 align:center
function.

00:22:20.100 --> 00:22:27.759 align:center
And actions can be mocked and spied on, even when being

00:22:27.759 --> 00:22:31.520 align:center
called from other actions.

00:22:31.520 --> 00:22:33.699 align:center
Because it's like a class.

00:22:33.699 --> 00:22:36.100 align:center
Because you access everything through these.

00:22:36.100 --> 00:22:40.100 align:center
But this is pretty much a technical implementation detail.

00:22:40.100 --> 00:22:45.263 align:center
But it's still part of the price you pay for the

00:22:45.263 --> 00:22:48.060 align:center
flexibility, I would say.

00:22:48.100 --> 00:22:52.570 align:center
Is that because you're in composable or setup stores, you

00:22:52.570 --> 00:22:57.088 align:center
have these functions where you define things and you just

00:22:57.088 --> 00:23:00.100 align:center
call the ref, you call computed, etc.

00:23:00.100 --> 00:23:03.444 align:center
It's very difficult to mock these things within the

00:23:03.444 --> 00:23:04.100 align:center
function.

00:23:04.100 --> 00:23:08.100 align:center
Or by difficult, I mean it's quite a lot of extra work.

00:23:08.100 --> 00:23:12.100 align:center
But that's pretty much it.

00:23:12.100 --> 00:23:16.100 align:center
Okay. Thank you for the explanation there.

00:23:16.100 --> 00:23:16.820 align:center
Let's see.

00:23:16.820 --> 00:23:20.494 align:center
Our next question is, what are some best practices for

00:23:20.494 --> 00:23:24.100 align:center
structuring and splitting stores in a large Vue app?

00:23:28.100 --> 00:23:34.100 align:center
This is a way to try to explain in just a minute.

00:23:34.100 --> 00:23:36.459 align:center
We have a few lessons.

00:23:36.459 --> 00:23:40.060 align:center
We have a whole section talking about this in Mastering

00:23:40.100 --> 00:23:41.419 align:center
Pinia, in fact.

00:23:41.419 --> 00:23:44.060 align:center
To make it as short as

00:23:44.100 --> 00:23:49.132 align:center
I can in a few sentences, the best way to make sure that

00:23:49.132 --> 00:23:54.276 align:center
you structure stores correctly in a large Vue application

00:23:54.276 --> 00:23:59.633 align:center
is to do a domain-driven development and make sure that you

00:23:59.633 --> 00:24:05.040 align:center
create stores for individual domains and to not hesitate to

00:24:05.040 --> 00:24:09.439 align:center
create new stores, even if it's a small domain.

00:24:09.439 --> 00:24:16.323 align:center
Because there is no benefit from having one big store

00:24:16.323 --> 00:24:20.090 align:center
instead of ten small stores.

00:24:20.100 --> 00:24:24.100 align:center
Okay. Our next question.

00:24:24.100 --> 00:24:28.583 align:center
Often while debugging with DevTools, the browser does not

00:24:28.583 --> 00:24:31.100 align:center
respond due to large data sets.

00:24:31.100 --> 00:24:35.766 align:center
How to handle this for better debugging? Is there a best

00:24:35.766 --> 00:24:40.100 align:center
practice to patch the state with dynamic variables?

00:24:40.100 --> 00:24:43.134 align:center
Yeah, this happens to me too, the problems with the

00:24:43.134 --> 00:24:43.730 align:center
DevTools.

00:24:43.730 --> 00:24:48.100 align:center
It's not specific to Pinia itself.

00:24:48.100 --> 00:24:49.350 align:center
And there are different cases.

00:24:49.350 --> 00:24:54.017 align:center
One of them is when you have very large data sets and you

00:24:54.017 --> 00:24:58.816 align:center
pass it to a ref or reactive in Vue, you are observing the

00:24:58.816 --> 00:25:01.959 align:center
whole object nested all the way down.

00:25:01.959 --> 00:25:04.100 align:center
And so you don't always need that.

00:25:04.100 --> 00:25:07.199 align:center
And you have different ways to avoid this in Vue.

00:25:07.199 --> 00:25:11.072 align:center
So you have shallow ref, shallow reactive, and you can also

00:25:11.072 --> 00:25:14.796 align:center
use mark row in an object to avoid Vue to deeply observe

00:25:14.796 --> 00:25:16.060 align:center
within the object.

00:25:16.100 --> 00:25:19.656 align:center
And you can use these same patterns in Pinia, especially

00:25:19.656 --> 00:25:22.260 align:center
mark row or shallow ref in setup stores.

00:25:22.260 --> 00:25:27.135 align:center
But then, of course, you still have, well, the DevTools

00:25:27.135 --> 00:25:32.100 align:center
sometimes can struggle a little bit with big data sets.

00:25:32.100 --> 00:25:36.100 align:center
And I don't really have a

00:25:36.100 --> 00:25:40.100 align:center
I mean, with big data sets, I just have the same problem.

00:25:40.100 --> 00:25:44.788 align:center
I just go row in those cases and by that I mean that I

00:25:44.788 --> 00:25:49.869 align:center
don't use the Vue DevTools, I use the regular DevTools and

00:25:49.869 --> 00:25:54.600 align:center
use breakpoints and debugger to see the actual state.

00:25:54.600 --> 00:25:56.100 align:center
That's my advice

00:25:56.100 --> 00:26:00.100 align:center
I can give.

00:26:00.100 --> 00:26:01.100 align:center
Thank you.

00:26:01.100 --> 00:26:05.774 align:center
Let's see, what is our next question? I would like to know

00:26:05.774 --> 00:26:10.345 align:center
the best practice for cleaning a store when routing away

00:26:10.345 --> 00:26:12.060 align:center
from a specific Vue.

00:26:12.100 --> 00:26:16.060 align:center
What about form validation within a Pinia store with

00:26:16.100 --> 00:26:20.980 align:center
Vuely dates? Is it recommended? So these are two questions.

00:26:20.980 --> 00:26:25.931 align:center
The first one, it's interesting because in some scenarios

00:26:25.931 --> 00:26:31.042 align:center
you might be more interested by using a composable instead

00:26:31.042 --> 00:26:32.100 align:center
of a store.

00:26:32.100 --> 00:26:37.885 align:center
If the lifespan of the data and everything is scoped to a

00:26:37.885 --> 00:26:43.542 align:center
specific page, you might use the composable within that

00:26:43.542 --> 00:26:45.600 align:center
page and that's it.

00:26:45.600 --> 00:26:48.100 align:center
Vue will handle everything else.

00:26:48.100 --> 00:26:53.699 align:center
But there is still a way to clean up a store within routing.

00:26:53.699 --> 00:26:59.162 align:center
So when you call, in other words, when your code calls the

00:26:59.162 --> 00:27:04.787 align:center
Vue store, the first time it will instantiate the store and

00:27:04.787 --> 00:27:06.980 align:center
then it will reuse it.

00:27:06.980 --> 00:27:11.487 align:center
And by default the store will just leave until you close

00:27:11.487 --> 00:27:13.419 align:center
the tab or the browser.

00:27:13.419 --> 00:27:18.622 align:center
So if you want to get rid of the store, you have a dispose

00:27:18.622 --> 00:27:19.340 align:center
method.

00:27:19.340 --> 00:27:23.965 align:center
And this dispose method is pretty much like a manual

00:27:23.965 --> 00:27:26.100 align:center
unmount of a component.

00:27:26.100 --> 00:27:29.898 align:center
It destroys all the reactivity that was set up, which is

00:27:29.898 --> 00:27:33.452 align:center
usually done automatically by Vue, but in this case,

00:27:33.452 --> 00:27:37.125 align:center
because stores are detached from components we need a

00:27:37.125 --> 00:27:38.580 align:center
manual way to do it.

00:27:38.580 --> 00:27:43.004 align:center
And so you have to do dispose and then you probably need to

00:27:43.004 --> 00:27:46.379 align:center
clean up the state on the pinia.state.value.

00:27:46.379 --> 00:27:50.814 align:center
Now this is intended in the, it's a bit weird, but it's

00:27:50.814 --> 00:27:55.270 align:center
just because it's such a manual process and most of the

00:27:55.270 --> 00:27:59.839 align:center
time it shouldn't be used, that if you use it and you're

00:27:59.839 --> 00:28:04.294 align:center
really sure there are some extra steps, just so people

00:28:04.294 --> 00:28:07.100 align:center
question themselves a little bit.

00:28:07.100 --> 00:28:11.050 align:center
I think we do have a page about it in the documentation

00:28:11.050 --> 00:28:15.321 align:center
that talks about dispose or if not, we have a few questions

00:28:15.321 --> 00:28:19.438 align:center
on the discussions section on GitHub that have some code

00:28:19.438 --> 00:28:20.100 align:center
samples.

00:28:20.100 --> 00:28:24.100 align:center
And then about form validation, it really depends.

00:28:24.100 --> 00:28:29.346 align:center
This is a bit vague for me to be able to give a correct

00:28:29.346 --> 00:28:30.109 align:center
answer.

00:28:30.109 --> 00:28:34.149 align:center
I would say that if it's form validation, most of the time

00:28:34.149 --> 00:28:36.100 align:center
it doesn't go into a store.

00:28:36.100 --> 00:28:40.712 align:center
Most of the time it is scoped to the component where the

00:28:40.712 --> 00:28:44.090 align:center
form is and I imagine that some place in

00:28:44.100 --> 00:28:46.100 align:center
Vuelidate Docs they say this.

00:28:46.100 --> 00:28:48.100 align:center
Now, could you use

00:28:48.100 --> 00:28:52.100 align:center
Vuelidate Composables within a Pinia store? Probably yes.

00:28:52.100 --> 00:28:56.485 align:center
It probably won't create any issue, but I don't think it's

00:28:56.485 --> 00:28:57.090 align:center
needed.

00:28:57.090 --> 00:29:01.506 align:center
Maybe you don't even need a store for that unless you

00:29:01.506 --> 00:29:05.090 align:center
really use the form across multiple pages.

00:29:05.090 --> 00:29:09.710 align:center
But then as you see, we enter into a lot of questions like

00:29:09.710 --> 00:29:12.100 align:center
if this, if that, then maybe.

00:29:12.100 --> 00:29:16.100 align:center
In the general case, form validation goes in components.

00:29:16.100 --> 00:29:20.100 align:center
Okay.

00:29:20.100 --> 00:29:21.439 align:center
Let's see.

00:29:21.439 --> 00:29:27.480 align:center
Our next question is we use a lot of pinia stores for our

00:29:27.480 --> 00:29:28.540 align:center
projects.

00:29:28.540 --> 00:29:34.546 align:center
Does it affect memory and performance even if they are not

00:29:34.546 --> 00:29:36.100 align:center
actively used?

00:29:36.100 --> 00:29:40.617 align:center
So they affect memory once they are used for the first time

00:29:40.617 --> 00:29:44.965 align:center
because the whole point is to have the global state that

00:29:44.965 --> 00:29:46.129 align:center
can be reused.

00:29:46.129 --> 00:29:50.739 align:center
So it does affect the memory once they are used, but they

00:29:50.739 --> 00:29:55.398 align:center
will not be instantiated until you reach the page that, I

00:29:55.398 --> 00:29:58.260 align:center
mean one page that uses the store.

00:29:58.260 --> 00:30:00.060 align:center
Performance-wise, they are the same.

00:30:00.100 --> 00:30:01.119 align:center
as a composable.

00:30:01.119 --> 00:30:04.491 align:center
So I wouldn't say they are, they don't really affect the

00:30:04.491 --> 00:30:07.889 align:center
performance unless you have like watchers running in the

00:30:07.889 --> 00:30:11.518 align:center
background, right? But that's a whole different story, or a

00:30:11.518 --> 00:30:12.379 align:center
set interval.

00:30:12.379 --> 00:30:17.023 align:center
Okay, the next question we have here, you might have

00:30:17.023 --> 00:30:21.219 align:center
already responded it in one of the first ones.

00:30:21.219 --> 00:30:25.883 align:center
Are there any plans to provide API caching related features

00:30:25.883 --> 00:30:30.230 align:center
like React query in Pinia? No, this will be Vue Query.

00:30:30.230 --> 00:30:35.530 align:center
Pena has a much more abstract and low level goal.

00:30:37.939 --> 00:30:40.280 align:center
Caching is a very complex topic.

00:30:40.280 --> 00:30:43.790 align:center
Pinia will be 20 times its size, even more.

00:30:43.790 --> 00:30:46.740 align:center
I don't know how, it's way more.

00:30:46.740 --> 00:30:50.580 align:center
Use Vue Query for caching, I would say.

00:30:50.580 --> 00:30:52.020 align:center
View query, okay.

00:30:52.020 --> 00:30:54.719 align:center
Okay, let's see the next question.

00:30:54.719 --> 00:30:58.947 align:center
How can we help improve documentation so that it will have

00:30:58.947 --> 00:31:03.120 align:center
many more examples on setup stores from beginner to super

00:31:03.120 --> 00:31:07.173 align:center
advanced? This is something I have in the roadmap, it's

00:31:07.173 --> 00:31:11.117 align:center
just that I haven't had the time to really address it

00:31:11.117 --> 00:31:14.689 align:center
because I'm a bit overflowed with the projects.

00:31:14.689 --> 00:31:18.823 align:center
Ideally, well, if someone really has the courage to do it,

00:31:18.823 --> 00:31:22.907 align:center
it would be nice to have a toggle similar to the one that

00:31:22.907 --> 00:31:27.023 align:center
we have in Vue.js documentation, that is on the top left,

00:31:27.023 --> 00:31:31.197 align:center
and that allows you to select between composition API and

00:31:31.197 --> 00:31:32.149 align:center
options API.

00:31:32.149 --> 00:31:37.869 align:center
And so we'll use a similar system to theirs to let users

00:31:37.869 --> 00:31:40.730 align:center
use one style or the other.

00:31:40.730 --> 00:31:44.925 align:center
And some pages, of course, only apply to composition setup

00:31:44.925 --> 00:31:48.469 align:center
stores, and others only apply to options stores.

00:31:48.469 --> 00:31:53.252 align:center
So if anybody wants to give it a try, it's copying the

00:31:53.252 --> 00:31:54.050 align:center
feature.

00:31:54.050 --> 00:31:58.739 align:center
Yeah, be brave and copy the feature from Vue.js docs to

00:31:58.740 --> 00:31:59.879 align:center
Pinia docs.

00:31:59.879 --> 00:32:04.439 align:center
They are both Vite Precise, so it's doable.

00:32:04.439 --> 00:32:08.945 align:center
It's still something not that easy, it's not something you

00:32:08.945 --> 00:32:11.820 align:center
do in five minutes, but it's doable.

00:32:11.820 --> 00:32:14.340 align:center
Let's see who will raise their hand

00:32:14.980 --> 00:32:16.510 align:center
for this one.

00:32:16.510 --> 00:32:18.040 align:center
Okay, let's see.

00:32:18.040 --> 00:32:21.970 align:center
Our next question is, should I use Pina directly in my

00:32:21.970 --> 00:32:25.938 align:center
components, or would it be more interesting to have an

00:32:25.938 --> 00:32:29.540 align:center
access layer to my store, like a services layer?

00:32:31.619 --> 00:32:34.369 align:center
Yeah, I would say use directly, no service layer. That

00:32:34.369 --> 00:32:34.980 align:center
would be...

00:32:37.219 --> 00:32:41.139 align:center
There are always exceptions, right? But I would say 99% of

00:32:41.139 --> 00:32:44.960 align:center
the cases, yeah, this is going to be cumbersome for your

00:32:44.960 --> 00:32:48.100 align:center
team if you create a service layer, so don't.

00:32:48.100 --> 00:32:50.199 align:center
It's pretty like a service.

00:32:53.780 --> 00:32:55.939 align:center
Okay. Okay, let's see.

00:32:55.939 --> 00:32:58.639 align:center
We have one from chat.

00:32:58.639 --> 00:33:02.959 align:center
Any plan to integrate Pinia seamlessly with Nuxt

00:33:02.980 --> 00:33:07.402 align:center
DevTools? I haven't had the chance to really dive into

00:33:07.402 --> 00:33:09.859 align:center
Anthony's work with DevTools.

00:33:10.740 --> 00:33:12.389 align:center
It's pretty cool.

00:33:12.389 --> 00:33:17.103 align:center
The thing is, the question is, what would you add to the

00:33:17.103 --> 00:33:21.521 align:center
Nuxt DevTools that is not already present in the Vue

00:33:21.521 --> 00:33:25.939 align:center
DevTools for Pinia? So, that would be the question.

00:33:25.939 --> 00:33:26.899 align:center
So, right now,

00:33:28.179 --> 00:33:29.899 align:center
I haven't explored anything.

00:33:29.899 --> 00:33:34.352 align:center
It might be on my to-do list, but it's after other things,

00:33:34.352 --> 00:33:38.752 align:center
because I feel that the features needed for debugging are

00:33:38.752 --> 00:33:42.879 align:center
already on the DevTools or can be improved on the Vue

00:33:42.879 --> 00:33:47.149 align:center
DevTools side, and I don't see what to add on the Nuxt

00:33:47.149 --> 00:33:47.939 align:center
DevTools.

00:33:47.939 --> 00:33:50.682 align:center
Things like performance and page loading are already

00:33:50.682 --> 00:33:52.949 align:center
handled by the Nuxt DevTools, for example.

00:33:54.100 --> 00:33:57.626 align:center
But I'm interested in seeing what people think, like ideas

00:33:57.626 --> 00:33:58.659 align:center
they might have.

00:33:58.820 --> 00:34:02.674 align:center
Hmm. Well, definitely keep an eye, then, on that one and

00:34:02.674 --> 00:34:04.740 align:center
see what people come up with.

00:34:06.740 --> 00:34:09.860 align:center
Okay. We have another question from the chat.

00:34:10.580 --> 00:34:14.554 align:center
Will there be any future update on persisting states to

00:34:14.554 --> 00:34:15.060 align:center
Pinia?

00:34:19.940 --> 00:34:21.759 align:center
I don't think I will do any.

00:34:21.759 --> 00:34:25.101 align:center
I mean, I'm sure I'm not, I won't add any core feature to

00:34:25.101 --> 00:34:26.040 align:center
Pinia for that.

00:34:26.040 --> 00:34:30.228 align:center
This is meant as a plugin, and I don't plan on rebuilding a

00:34:30.228 --> 00:34:32.500 align:center
plugin if there is already one.

00:34:32.580 --> 00:34:35.715 align:center
If anything, I will try to help the maintainer of that

00:34:35.715 --> 00:34:36.179 align:center
plugin.

00:34:36.179 --> 00:34:39.540 align:center
But I think they were already doing a great job.

00:34:39.540 --> 00:34:43.963 align:center
So, there are really no plans to take over that plugin or

00:34:43.963 --> 00:34:44.739 align:center
anything.

00:34:44.739 --> 00:34:48.339 align:center
It seems to be working fine for a lot of people.

00:34:48.339 --> 00:34:50.100 align:center
It's Pinia persisted states, I think.

00:34:50.580 --> 00:34:54.739 align:center
Mm-hmm. Okay. Shout out to the maintainer.

00:34:56.020 --> 00:34:56.520 align:center
Yeah.

00:35:01.139 --> 00:35:02.400 align:center
The next question.

00:35:02.400 --> 00:35:07.002 align:center
How would you use Pinia and Nuxt 3 using Nuxt data fetching

00:35:07.002 --> 00:35:07.860 align:center
abilities?

00:35:07.940 --> 00:35:12.170 align:center
Fetch the component and store data in Pinia after, or fetch

00:35:12.170 --> 00:35:16.312 align:center
inside Pinia and expose the data error and pending values

00:35:16.312 --> 00:35:17.619 align:center
to the component?

00:35:17.860 --> 00:35:19.619 align:center
Yeah, this is interesting.

00:35:19.619 --> 00:35:24.023 align:center
If I, it's definitely something I need to cover in the

00:35:24.023 --> 00:35:25.980 align:center
Mastering Pinia course.

00:35:25.980 --> 00:35:29.992 align:center
I have this chapter for Nuxt, and this is something I'm

00:35:29.992 --> 00:35:31.159 align:center
going to cover.

00:35:33.219 --> 00:35:38.865 align:center
The actual, in practice, if you can only use Nuxt data

00:35:38.865 --> 00:35:43.779 align:center
fetching without putting it into a Pina store,

00:35:44.259 --> 00:35:48.960 align:center
I think if that's enough, you use it that way.

00:35:48.960 --> 00:35:53.619 align:center
If not, you should be able to use the composables

00:35:54.819 --> 00:35:58.026 align:center
within a setup store. The only problem is that a setup

00:35:58.026 --> 00:36:00.580 align:center
store function is meant to be synchronous.

00:36:00.580 --> 00:36:02.679 align:center
It cannot have any await inside.

00:36:02.679 --> 00:36:06.717 align:center
So, that means that if you want to await the data in a

00:36:06.717 --> 00:36:07.540 align:center
component,

00:36:08.500 --> 00:36:13.116 align:center
you need to return some function that, some of the refresh

00:36:13.116 --> 00:36:17.752 align:center
function or some of the functions that gives you access to

00:36:17.752 --> 00:36:22.334 align:center
the current promise, something that allows you to, on the

00:36:22.334 --> 00:36:26.954 align:center
page, on the component where you use the store, await the

00:36:26.954 --> 00:36:31.900 align:center
pending fetching operation that is retrieved from the store.

00:36:31.900 --> 00:36:35.200 align:center
And in this scenario, I will be putting the data, the

00:36:35.200 --> 00:36:38.190 align:center
error, and the pending values in the component.

00:36:38.190 --> 00:36:40.549 align:center
Sorry, in the store.

00:36:40.549 --> 00:36:46.485 align:center
It's a bit difficult to visualize the whole thing without

00:36:46.485 --> 00:36:47.110 align:center
code.

00:36:47.110 --> 00:36:48.489 align:center
I think.

00:36:48.489 --> 00:36:50.560 align:center
But it's doable.

00:36:50.560 --> 00:36:56.080 align:center
Okay. We will explore it further another time.

00:36:56.080 --> 00:36:58.150 align:center
Maybe with code.

00:36:59.139 --> 00:37:00.730 align:center
Okay. Let's see.

00:37:00.730 --> 00:37:05.373 align:center
Our next question is, how did you design the framework and

00:37:05.373 --> 00:37:10.063 align:center
do you have any recommended resources to get more familiar

00:37:10.063 --> 00:37:13.540 align:center
with this level of design and development?

00:37:17.060 --> 00:37:23.652 align:center
For me, I designed the framework based on the real world,

00:37:23.652 --> 00:37:26.659 align:center
the real scenarios I had.

00:37:28.179 --> 00:37:30.339 align:center
real problems I wanted to solve.

00:37:30.339 --> 00:37:34.334 align:center
So, I tried to go from the target API and implement that

00:37:34.334 --> 00:37:35.190 align:center
afterwards.

00:37:35.190 --> 00:37:39.963 align:center
Now, the internal design can change because it becomes an

00:37:39.963 --> 00:37:44.819 align:center
implementation detail as long as you have the actual API.

00:37:44.819 --> 00:37:47.219 align:center
I really based it on experience.

00:37:47.219 --> 00:37:48.420 align:center
I think that

00:37:48.980 --> 00:37:55.707 align:center
this kind of design, it's very specific to developing APIs

00:37:55.707 --> 00:37:58.259 align:center
for other developers.

00:38:00.020 --> 00:38:05.032 align:center
And I guess that some of the resources that can be used or

00:38:05.032 --> 00:38:10.198 align:center
that can be helpful are design patterns design patterns are

00:38:10.198 --> 00:38:11.600 align:center
usually useful.

00:38:11.600 --> 00:38:15.920 align:center
And otherwise, the good old practice, like try

00:38:18.500 --> 00:38:24.148 align:center
read other people's things, try to implement new features,

00:38:24.148 --> 00:38:25.219 align:center
bug fixes.

00:38:25.860 --> 00:38:31.227 align:center
And so, having to go through someone else's code really

00:38:31.227 --> 00:38:37.179 align:center
lights up the way you interpret and understand foreign code.

00:38:37.179 --> 00:38:40.980 align:center
So, it inspires you in a way.

00:38:42.259 --> 00:38:44.210 align:center
Yeah, it does.

00:38:44.210 --> 00:38:45.509 align:center
Awesome. Okay.

00:38:45.509 --> 00:38:46.810 align:center
Let's see.

00:38:46.810 --> 00:38:49.409 align:center
Our next question is,

00:38:51.779 --> 00:38:55.779 align:center
How to use stores in custom libraries, best practices?

00:38:57.540 --> 00:39:00.493 align:center
I would say, usually, when you want to use Pinia, most of

00:39:00.493 --> 00:39:03.239 align:center
the time you don't need to use Pinia custom library.

00:39:03.239 --> 00:39:06.302 align:center
For example, you have your UI library, like Vuetify or

00:39:06.302 --> 00:39:06.869 align:center
anything.

00:39:07.699 --> 00:39:10.900 align:center
You don't need a store to handle that.

00:39:10.900 --> 00:39:14.100 align:center
Why? Because usually, the state is localized for

00:39:14.819 --> 00:39:17.819 align:center
a set of components.

00:39:17.819 --> 00:39:24.499 align:center
For example, some table, some tab manager, like different

00:39:24.499 --> 00:39:25.319 align:center
views.

00:39:25.319 --> 00:39:29.100 align:center
So, you use provide inject from Vue most of the time.

00:39:29.100 --> 00:39:30.900 align:center
You don't need Pinia for that.

00:39:30.900 --> 00:39:33.460 align:center
Pinia is when it's at the application level.

00:39:33.460 --> 00:39:37.507 align:center
If you still want to expose a Pinia API for your library,

00:39:37.507 --> 00:39:41.667 align:center
which can happen, for example, for some global components,

00:39:41.667 --> 00:39:44.679 align:center
like toast and some notifications things,

00:39:46.100 --> 00:39:51.178 align:center
the recommendation I have is to still let the user create

00:39:51.178 --> 00:39:52.960 align:center
the Pinia instance.

00:39:52.960 --> 00:39:56.659 align:center
There should only be one Pinia instance at the end.

00:39:56.659 --> 00:39:58.409 align:center
Otherwise, you're not gonna share

00:40:00.100 --> 00:40:03.900 align:center
the state of, the global state of your library.

00:40:03.900 --> 00:40:07.559 align:center
And you may end up with multiple Pinia copies, like the

00:40:07.559 --> 00:40:11.020 align:center
library, the code, in the final application bundle.

00:40:11.020 --> 00:40:15.535 align:center
You have to mark the Pinia library as external, but this is

00:40:15.535 --> 00:40:19.730 align:center
a whole topic about bundling libraries, which is a bit

00:40:19.730 --> 00:40:20.739 align:center
complicated.

00:40:20.739 --> 00:40:21.934 align:center
Hopefully some, there are some tools that make it easy,

00:40:21.934 --> 00:40:23.094 align:center
like unbuild. So if anybody wants to try to have some

00:40:23.094 --> 00:40:24.206 align:center
starters, then usually they handle a lot of things

00:40:24.206 --> 00:40:24.540 align:center
automatically.

00:40:32.839 --> 00:40:33.679 align:center
Nice, okay.

00:40:33.679 --> 00:40:38.062 align:center
I love how all of the questions are so deep topics that can

00:40:38.062 --> 00:40:39.400 align:center
be its own thing.

00:40:41.480 --> 00:40:42.319 align:center
Okay, let's see.

00:40:42.319 --> 00:40:47.796 align:center
Our next question is, will PNIA natively support data

00:40:47.796 --> 00:40:49.139 align:center
persistence?

00:40:49.159 --> 00:40:51.080 align:center
Yeah, so we said already, no.

00:40:52.440 --> 00:40:53.679 align:center
We answered this already.

00:40:53.679 --> 00:40:54.799 align:center
No.

00:40:54.799 --> 00:40:56.239 align:center
Okay.

00:40:56.239 --> 00:40:59.600 align:center
I believe this one is very interesting.

00:40:59.600 --> 00:41:03.579 align:center
Devil's advocate, when not to use Pinia?

00:41:04.679 --> 00:41:07.480 align:center
There are many, many cases where you shouldn't use Pinia.

00:41:08.679 --> 00:41:12.614 align:center
I think that I've seen a lot of people trying to put too

00:41:12.614 --> 00:41:14.159 align:center
many things in Pinia,

00:41:15.639 --> 00:41:19.540 align:center
maybe out of a habit,

00:41:20.639 --> 00:41:23.520 align:center
but I wouldn't, one of the golden rule is,

00:41:23.560 --> 00:41:25.839 align:center
I wouldn't put something in Pinia,

00:41:26.679 --> 00:41:29.519 align:center
or you have to define putting in Pinia, right?

00:41:29.520 --> 00:41:30.839 align:center
Or using Pinia.

00:41:30.839 --> 00:41:35.043 align:center
Because you can still use the structure approach of Pinia

00:41:35.043 --> 00:41:37.919 align:center
to have stores that are like services.

00:41:37.920 --> 00:41:42.327 align:center
So they are allowed to have a domain-driven approach, but I

00:41:42.327 --> 00:41:46.481 align:center
wouldn't define state in a Pinia store if that state is

00:41:46.481 --> 00:41:49.199 align:center
already, it belongs somewhere else.

00:41:49.199 --> 00:41:50.480 align:center
For example, if I'm gonna take the example of Firebase and

00:41:50.480 --> 00:41:51.677 align:center
Vue Fire, because I've been working on it recently. So

00:41:51.677 --> 00:41:52.901 align:center
Firebase has a real-time database and you have with Vue

00:41:52.901 --> 00:41:54.176 align:center
Fire composables that are use document or use collection,

00:41:54.176 --> 00:41:55.506 align:center
and it gives you access to a ref, in a view ref, and it's a

00:41:55.506 --> 00:41:56.765 align:center
document, an object, or an array, and it's always up to

00:41:56.765 --> 00:41:57.040 align:center
date, okay?

00:42:12.779 --> 00:42:17.739 align:center
So this state can be handled by Vue Fire,

00:42:18.400 --> 00:42:21.960 align:center
but if you're returning in a store,

00:42:22.960 --> 00:42:28.151 align:center
you might end up, I mean, you will end up duplicating some

00:42:28.151 --> 00:42:30.299 align:center
of the source of truth,

00:42:31.199 --> 00:42:33.675 align:center
because Pinia will put it in the Pinia state, and it will

00:42:33.675 --> 00:42:36.247 align:center
just be the same thing because Vue handles things well, but

00:42:36.247 --> 00:42:38.701 align:center
in some cases, you might find yourself copying the state

00:42:38.701 --> 00:42:41.219 align:center
and duplicating the source of truth. So you don't want to

00:42:41.219 --> 00:42:43.683 align:center
put things in Pinia as state if they are already stored

00:42:43.683 --> 00:42:44.400 align:center
somewhere else.

00:42:52.719 --> 00:42:57.091 align:center
You can consume them, you can use them in actions, use them

00:42:57.091 --> 00:43:01.218 align:center
in computer property in getters, but they should not be

00:43:01.218 --> 00:43:02.869 align:center
just copied on Pinia.

00:43:05.139 --> 00:43:08.441 align:center
It's a bit difficult to see without the actual example, but

00:43:08.441 --> 00:43:11.239 align:center
I hope that the one with ViewFire wasn't too bad.

00:43:13.040 --> 00:43:14.219 align:center
Nice, thank you.

00:43:15.759 --> 00:43:18.080 align:center
Okay, let's see the next one.

00:43:18.080 --> 00:43:21.423 align:center
Where is it better to define, initiate a store? Globally or

00:43:21.423 --> 00:43:22.840 align:center
directly on a component?

00:43:25.960 --> 00:43:30.519 align:center
And what about when the component is used multiple times on

00:43:30.519 --> 00:43:32.759 align:center
different parent components?

00:43:32.779 --> 00:43:34.119 align:center
So same page view.

00:43:35.239 --> 00:43:37.145 align:center
So you define store, so that's defining a store with a

00:43:37.145 --> 00:43:39.137 align:center
function defineStore, you have to do that globally. What

00:43:39.137 --> 00:43:41.155 align:center
defineStore does is create a composable that you can use

00:43:41.155 --> 00:43:41.840 align:center
within components.

00:43:48.279 --> 00:43:51.334 align:center
And so that composable, when it's called, it initiates a

00:43:51.334 --> 00:43:53.079 align:center
store, but only the first time.

00:43:53.080 --> 00:43:55.560 align:center
It's like lazily initialized.

00:43:55.560 --> 00:43:58.994 align:center
And so the function returned by the defineStore, which is

00:43:58.994 --> 00:44:02.463 align:center
what initiates the store, should be called in components,

00:44:02.463 --> 00:44:05.079 align:center
and the definition should happen globally.

00:44:05.080 --> 00:44:08.965 align:center
And there is no problem about using, so calling the

00:44:08.965 --> 00:44:13.031 align:center
useStore within multiple components because it's only

00:44:13.031 --> 00:44:17.299 align:center
initialized once, and then all the subsequent calls are

00:44:17.299 --> 00:44:19.860 align:center
just gonna reuse the same store.

00:44:19.860 --> 00:44:22.777 align:center
There is just a map behind the scenes, it just checks the

00:44:22.777 --> 00:44:24.159 align:center
ID and returns the object.

00:44:24.159 --> 00:44:25.960 align:center
It's as simple as that.

00:44:27.920 --> 00:44:29.480 align:center
Nice, okay.

00:44:31.139 --> 00:44:35.527 align:center
Let's see, our next question is, what is your recommended

00:44:35.527 --> 00:44:39.977 align:center
way to handle loading state while using Pinia with Nuxt 3

00:44:39.977 --> 00:44:41.069 align:center
and useFetch?

00:44:45.159 --> 00:44:47.839 align:center
Do I have one recommended way?

00:44:47.839 --> 00:44:50.600 align:center
I don't think there is one recommended way to do it.

00:44:52.000 --> 00:44:54.279 align:center
It's similar to what I said before.

00:44:54.279 --> 00:44:56.069 align:center
If you can avoid putting it in Pinia, I would just useFetch

00:44:56.069 --> 00:44:57.849 align:center
from Nox because it's already worked without Pinia, so you

00:44:57.849 --> 00:44:58.800 align:center
don't need to complexify that.

00:45:05.560 --> 00:45:08.880 align:center
And they already deduped the things, if I'm not mistaken.

00:45:08.880 --> 00:45:12.159 align:center
By deduped things, I mean deduped the API calls.

00:45:13.159 --> 00:45:13.999 align:center
So,

00:45:19.560 --> 00:45:21.848 align:center
if you can put it outside of the Pinia store, put it

00:45:21.848 --> 00:45:23.080 align:center
outside of the Pinia store.

00:45:23.080 --> 00:45:28.118 align:center
If not, if there is any reason you want to have the loading

00:45:28.118 --> 00:45:30.679 align:center
state within the Pinia store,

00:45:30.679 --> 00:45:33.340 align:center
I think you can still put it in a Pinia store and somehow

00:45:33.340 --> 00:45:35.835 align:center
return a getter to the data because you don't want to

00:45:35.835 --> 00:45:38.520 align:center
duplicate the state. It's a bit more complex to explain,

00:45:40.600 --> 00:45:43.306 align:center
this requires showing the actual problems with the code,

00:45:43.306 --> 00:45:46.028 align:center
showing, okay, look at the page render here, and then we

00:45:46.028 --> 00:45:48.673 align:center
inspect the source and we see how we can duplicate the

00:45:48.673 --> 00:45:51.603 align:center
state if we do it the wrong way. We have twice the state in

00:45:51.603 --> 00:45:52.200 align:center
two places.

00:45:55.199 --> 00:45:57.119 align:center
It's not something I can just stop.

00:45:57.119 --> 00:46:00.771 align:center
But if you can avoid putting it in Pinia store, it's better

00:46:00.771 --> 00:46:03.679 align:center
because you won't have that potential problem.

00:46:05.880 --> 00:46:08.679 align:center
Okay, thanks for letting us know.

00:46:08.719 --> 00:46:12.126 align:center
There's an idea for some other sessions with this specific

00:46:12.126 --> 00:46:15.443 align:center
topic, because, you know, Pinia paired with Nuxt3, there

00:46:15.443 --> 00:46:18.879 align:center
are so many questions about the best practices with that.

00:46:19.880 --> 00:46:21.480 align:center
Okay, let's see.

00:46:21.480 --> 00:46:25.393 align:center
Our next question is, have you considered embedding in

00:46:25.393 --> 00:46:29.297 align:center
Pinia a generic object store with add, update, delete

00:46:29.297 --> 00:46:29.959 align:center
methods?

00:46:30.400 --> 00:46:35.400 align:center
No, I think this is pretty much a no-REM, I think.

00:46:36.719 --> 00:46:41.719 align:center
Okay, well, there is a library to handle that.

00:46:44.639 --> 00:46:47.759 align:center
So yeah, just object relational mapping.

00:46:51.759 --> 00:46:55.759 align:center
The idea for Pinia is to stay as close as view as possible.

00:46:55.759 --> 00:46:59.040 align:center
So, yeah, I think that's a good idea.

00:47:00.960 --> 00:47:04.639 align:center
Adding a layer of complexity that is not always needed

00:47:04.639 --> 00:47:07.159 align:center
would be to go against those values.

00:47:10.199 --> 00:47:12.239 align:center
Okay, that makes sense.

00:47:13.400 --> 00:47:15.600 align:center
Let's see, we have one question from Chat.

00:47:16.600 --> 00:47:20.433 align:center
How can I have a consistent pattern when you have a bunch

00:47:20.433 --> 00:47:24.435 align:center
of views that fetches data from an API via actions, and the

00:47:24.435 --> 00:47:27.881 align:center
rest of the views only fetches data for use in the

00:47:27.881 --> 00:47:28.640 align:center
component?

00:47:30.960 --> 00:47:34.580 align:center
Fetch data from an API via actions, and the others fetch

00:47:34.580 --> 00:47:36.520 align:center
data for using the component?

00:47:37.440 --> 00:47:40.272 align:center
I'm not sure what's the difference between fetching data

00:47:40.272 --> 00:47:42.994 align:center
from an API via actions and fetching data for using a

00:47:42.994 --> 00:47:43.559 align:center
component.

00:47:43.560 --> 00:47:46.699 align:center
I guess that once it happens within the action and the

00:47:46.699 --> 00:47:49.200 align:center
other ones have an, okay. Okay, now I see.

00:47:50.319 --> 00:47:52.964 align:center
So they want to reuse some of the patterns they use within

00:47:52.964 --> 00:47:54.879 align:center
their stores and the components, I think.

00:47:54.880 --> 00:47:56.520 align:center
If not, please tell me in the chat.

00:47:56.520 --> 00:47:58.480 align:center
I have it on the side just in case.

00:47:59.400 --> 00:48:02.279 align:center
I think the answer is using a composable.

00:48:02.279 --> 00:48:05.952 align:center
The point of being a set of stores is to be able to use

00:48:05.952 --> 00:48:06.819 align:center
composables.

00:48:06.839 --> 00:48:09.760 align:center
So abstracting these patterns in a composable

00:48:11.239 --> 00:48:15.759 align:center
makes it consistent in both stores and components.

00:48:19.440 --> 00:48:21.639 align:center
Yes, that's what they meant.

00:48:21.639 --> 00:48:22.600 align:center
Awesome, good to know.

00:48:22.600 --> 00:48:23.880 align:center
Thanks for confirming.

00:48:24.920 --> 00:48:27.239 align:center
Okay, let's see.

00:48:27.239 --> 00:48:30.194 align:center
Our next question is, what is a better way of writing

00:48:30.194 --> 00:48:30.639 align:center
Pinyin?

00:48:30.639 --> 00:48:33.920 align:center
Composition API or options API style?

00:48:34.960 --> 00:48:38.560 align:center
In my opinion, composition API is just more flexible.

00:48:38.560 --> 00:48:42.319 align:center
You have, there are things you cannot do with options API.

00:48:42.319 --> 00:48:44.440 align:center
This is the same for view.

00:48:45.319 --> 00:48:48.961 align:center
Composition API just enables some patterns that you cannot

00:48:48.961 --> 00:48:50.279 align:center
create with options.

00:48:50.279 --> 00:48:52.119 align:center
And the same apply for Pinia.

00:48:52.119 --> 00:48:56.759 align:center
So I think objectively speaking,

00:48:57.279 --> 00:48:59.000 align:center
it is better.

00:48:59.000 --> 00:49:01.159 align:center
It just exists for,

00:49:02.279 --> 00:49:06.121 align:center
the option API version in Pinyin exists because it's easier

00:49:06.121 --> 00:49:08.529 align:center
to migrate from an existing version.

00:49:08.560 --> 00:49:12.268 align:center
And I think that we have a lot of different developers

00:49:12.268 --> 00:49:13.710 align:center
using the libraries.

00:49:13.719 --> 00:49:16.839 align:center
So it's nice to cater for different people.

00:49:16.839 --> 00:49:18.860 align:center
So as long as they are used, same as with view, as long as

00:49:18.860 --> 00:49:20.902 align:center
they are being used, we will keep both. But we cannot deny

00:49:20.902 --> 00:49:22.240 align:center
the advantage of the composition API.

00:49:27.199 --> 00:49:28.119 align:center
That makes sense.

00:49:29.119 --> 00:49:30.759 align:center
Okay, let's see.

00:49:30.759 --> 00:49:34.776 align:center
Our next question, how to handle when you want a store

00:49:34.776 --> 00:49:38.830 align:center
bound to a component to have multiple instances of the

00:49:38.830 --> 00:49:42.810 align:center
store and comp on the same page with different data?

00:49:42.839 --> 00:49:47.718 align:center
Example, a store to handle data plus sort and call prep for

00:49:47.718 --> 00:49:48.380 align:center
a grid.

00:49:49.679 --> 00:49:51.759 align:center
This sounds like a composable to me.

00:49:53.119 --> 00:49:56.268 align:center
So to me, this would be not use a store and use a

00:49:56.268 --> 00:49:57.040 align:center
composable.

00:49:57.040 --> 00:49:59.305 align:center
Because a store is supposed to be global, but a composable

00:49:59.305 --> 00:50:00.360 align:center
is bound to the component.

00:50:00.719 --> 00:50:04.344 align:center
And the stores are very close to the composable, it's just

00:50:04.344 --> 00:50:06.719 align:center
that they handle all the global part.

00:50:06.719 --> 00:50:12.155 align:center
So we actually have an example here of what we discussed

00:50:12.155 --> 00:50:13.319 align:center
previously.

00:50:15.299 --> 00:50:16.380 align:center
Okay, let's see.

00:50:16.380 --> 00:50:20.522 align:center
Our next question is, I know learning by doing is one of

00:50:20.522 --> 00:50:22.520 align:center
the ways to reach mastery.

00:50:22.520 --> 00:50:27.472 align:center
How did you master Pinyin? How would you go about learning

00:50:27.472 --> 00:50:32.395 align:center
it if you have a full-time job and so much other stuff to

00:50:32.395 --> 00:50:34.900 align:center
do? This is a live question.

00:50:34.900 --> 00:50:38.500 align:center
I think we all have different goals,

00:50:39.219 --> 00:50:43.540 align:center
different definitions of success in terms of job, life.

00:50:43.540 --> 00:50:51.060 align:center
Personally, I give up some other things in life or in job.

00:50:57.540 --> 00:51:00.654 align:center
I consecrated a lot of time to open source, personally,

00:51:00.654 --> 00:51:03.600 align:center
because I thought that was more interesting for me.

00:51:03.600 --> 00:51:05.699 align:center
But it was always practice.

00:51:05.699 --> 00:51:10.850 align:center
So I just did practice in the project that I found fun.

00:51:10.850 --> 00:51:15.003 align:center
If, for example, I would have found myself in a project

00:51:15.003 --> 00:51:19.460 align:center
that wasn't aligned with the direction I wanted my career.

00:51:21.219 --> 00:51:23.420 align:center
I'm speaking English right now.

00:51:23.420 --> 00:51:27.780 align:center
If I was in a job that isn't aligned with

00:51:28.659 --> 00:51:31.916 align:center
the direction I want to take in my career, I would just try

00:51:31.916 --> 00:51:34.179 align:center
to find another job that aligned better.

00:51:34.179 --> 00:51:39.012 align:center
Or try to change within the job or adapt to align better

00:51:39.012 --> 00:51:40.480 align:center
with my choices.

00:51:40.480 --> 00:51:43.533 align:center
If I want to do some specific technologies, for example,

00:51:43.533 --> 00:51:46.259 align:center
that could be switching jobs, switching projects,

00:51:48.819 --> 00:51:53.542 align:center
dedicating. And then learning, in general, it's all about

00:51:53.542 --> 00:51:54.619 align:center
consistency.

00:51:54.619 --> 00:51:59.352 align:center
So having some consistent timing for the learning is the

00:51:59.352 --> 00:51:59.860 align:center
best.

00:51:59.860 --> 00:52:03.813 align:center
For example, every day spending, even if it's 15 minutes,

00:52:03.813 --> 00:52:07.489 align:center
half an hour, in the morning, in the evening, lunch.

00:52:07.489 --> 00:52:10.279 align:center
I'm talking about the work days, of course.

00:52:10.279 --> 00:52:14.524 align:center
That's how I went for me about learning, I mean, doing some

00:52:14.524 --> 00:52:15.460 align:center
open source.

00:52:15.460 --> 00:52:18.800 align:center
I would consistently do open source in the mornings or the

00:52:18.800 --> 00:52:21.679 align:center
evenings, sometimes both, and sometimes at lunch.

00:52:21.679 --> 00:52:22.880 align:center
Lunch, not that much.

00:52:22.880 --> 00:52:24.679 align:center
But sometimes outside of the work.

00:52:24.679 --> 00:52:26.420 align:center
But just before or just after,

00:52:27.299 --> 00:52:33.299 align:center
because it felt like it was still connected to work. Yeah.

00:52:35.940 --> 00:52:39.203 align:center
We have one question from chat that says, any

00:52:39.203 --> 00:52:41.960 align:center
recommendation about the migration of

00:52:42.020 --> 00:52:46.418 align:center
Vuex to Pinia? Some steps before migration to have in mind,

00:52:46.418 --> 00:52:46.940 align:center
maybe?

00:52:47.860 --> 00:52:54.974 align:center
Are there any generic steps that apply to many projects? I

00:52:54.974 --> 00:52:57.060 align:center
think there are.

00:53:00.500 --> 00:53:05.389 align:center
Having Vuex modules align much better with the Pinia stores

00:53:05.389 --> 00:53:06.549 align:center
architecture,

00:53:07.299 --> 00:53:10.502 align:center
where everything is a module, pretty much. So we just call

00:53:10.502 --> 00:53:11.219 align:center
them stores.

00:53:11.219 --> 00:53:16.420 align:center
What else?

00:53:22.100 --> 00:53:24.579 align:center
Removing the root store, for example, like only using

00:53:24.579 --> 00:53:25.000 align:center
modules.

00:53:25.000 --> 00:53:28.406 align:center
But I think that's the only generic piece of advice that

00:53:28.406 --> 00:53:29.380 align:center
can be applied.

00:53:29.380 --> 00:53:32.180 align:center
Everything else is just, it depends on the project.

00:53:35.060 --> 00:53:38.420 align:center
So on the size and the scope of the project, right? Yeah.

00:53:38.420 --> 00:53:41.239 align:center
You can use the options API, for example.

00:53:41.239 --> 00:53:46.871 align:center
This is one of the places where using options API enables

00:53:46.871 --> 00:53:48.650 align:center
easier migration.

00:53:48.659 --> 00:53:53.500 align:center
And you can use Vuex and Pinia side by side, too.

00:53:53.500 --> 00:53:54.380 align:center
Okay. Awesome.

00:53:54.380 --> 00:53:58.750 align:center
And the next one is actually also about integration.

00:53:58.750 --> 00:54:01.699 align:center
Integration with tools like Supabase.

00:54:02.420 --> 00:54:07.299 align:center
Thought about creating a PS data tool, aka Pinia Supabase.

00:54:11.860 --> 00:54:14.491 align:center
I don't know if it's thoughts about creating or have you

00:54:14.491 --> 00:54:15.619 align:center
thought about creating.

00:54:20.259 --> 00:54:21.659 align:center
I haven't used Supabase.

00:54:21.659 --> 00:54:23.759 align:center
I'm a fan of Firebase, personally.

00:54:23.759 --> 00:54:27.339 align:center
And I feel like they have a lot of overlap.

00:54:27.339 --> 00:54:31.299 align:center
So I haven't had the chance to use Supabase.

00:54:31.299 --> 00:54:34.380 align:center
But I suppose it has similar targets.

00:54:36.259 --> 00:54:43.245 align:center
The idea for Pinia is that it doesn't require you to have

00:54:43.245 --> 00:54:46.310 align:center
any specific integration

00:54:46.980 --> 00:54:49.199 align:center
with things like Superbase or Firebase.

00:54:49.199 --> 00:54:53.219 align:center
For example, in Vue Fire, the way it works is you

00:54:54.179 --> 00:54:55.779 align:center
can give a ref.

00:54:55.779 --> 00:54:59.993 align:center
So you can give the object where you want to store the

00:54:59.993 --> 00:55:02.100 align:center
collection or document the

00:55:03.219 --> 00:55:05.389 align:center
always up to date collection or document.

00:55:05.389 --> 00:55:07.250 align:center
And then the library handles that.

00:55:07.250 --> 00:55:09.000 align:center
Instead of creating a ref themselves.

00:55:09.000 --> 00:55:12.308 align:center
So when you call use document that is going to give you a

00:55:12.308 --> 00:55:14.920 align:center
ref of a document that is always up to date.

00:55:14.920 --> 00:55:18.146 align:center
You call use document that you pass as a parameter in the

00:55:18.146 --> 00:55:18.429 align:center
ref.

00:55:18.429 --> 00:55:19.420 align:center
Something like that.

00:55:19.420 --> 00:55:23.159 align:center
Or that way you can connect it into a Pinia store.

00:55:23.159 --> 00:55:27.093 align:center
Or you can directly connect it by calling it within a setup

00:55:27.093 --> 00:55:27.560 align:center
store.

00:55:27.560 --> 00:55:31.086 align:center
Now, of course, it depends on the implementation of the use

00:55:31.086 --> 00:55:32.819 align:center
document and use collection.

00:55:32.819 --> 00:55:34.520 align:center
And I haven't used Superbase.

00:55:34.520 --> 00:55:37.540 align:center
But I think that a lot of the times

00:55:38.420 --> 00:55:42.393 align:center
you probably don't need the store in these cases because

00:55:42.393 --> 00:55:46.468 align:center
they have their own, like, network layer that handles all

00:55:46.468 --> 00:55:50.670 align:center
the duplication of the request and they handle the caching

00:55:50.670 --> 00:55:51.830 align:center
and everything.

00:55:51.830 --> 00:55:53.040 align:center
It's pretty complex.

00:55:53.040 --> 00:55:56.480 align:center
That's why they are a bit heavy sometimes.

00:55:56.480 --> 00:56:00.630 align:center
So I wonder what exactly they want to integrate.

00:56:00.630 --> 00:56:05.190 align:center
Well, if the user who asked this question is here

00:56:05.190 --> 00:56:10.455 align:center
following, let us know what thoughts you had in mind and

00:56:10.455 --> 00:56:14.310 align:center
maybe we can make it another discussion.

00:56:17.139 --> 00:56:21.319 align:center
Okay. We have time for only a couple of more questions.

00:56:21.319 --> 00:56:25.772 align:center
The next one would be is it possible to use Pinia

00:56:25.772 --> 00:56:31.214 align:center
asynchronously? So I suppose that they mean having an async

00:56:31.214 --> 00:56:31.860 align:center
setup.

00:56:33.619 --> 00:56:35.719 align:center
If that's the question, no.

00:56:35.719 --> 00:56:38.239 align:center
You cannot have an async setup.

00:56:38.239 --> 00:56:39.500 align:center
We don't know.

00:56:39.500 --> 00:56:41.140 align:center
Maybe in the future

00:56:41.779 --> 00:56:45.891 align:center
there is something like suspense for stores. But for the

00:56:45.891 --> 00:56:48.020 align:center
moment, that's not the case.

00:56:49.299 --> 00:56:55.160 align:center
I don't think they align well with the design and the goals

00:56:55.160 --> 00:56:56.650 align:center
of the stores.

00:56:56.650 --> 00:56:58.100 align:center
Other than that,

00:56:58.100 --> 00:57:02.065 align:center
Pinia actions can be asynchronous. And you can call them

00:57:02.065 --> 00:57:04.259 align:center
within asynchronous functions.

00:57:04.819 --> 00:57:08.100 align:center
But a Pinia store setup function cannot be asynchronous.

00:57:09.779 --> 00:57:11.060 align:center
Okay. Good to know.

00:57:11.060 --> 00:57:11.699 align:center
Let's see.

00:57:11.699 --> 00:57:14.580 align:center
The next one is how could I use it

00:57:15.219 --> 00:57:20.739 align:center
outside of Vue in case I need it? So probably Pinia.

00:57:22.020 --> 00:57:26.080 align:center
Yeah. I mean, I haven't tried it.

00:57:26.080 --> 00:57:30.139 align:center
But everything revolves around the Pinia instance.

00:57:30.139 --> 00:57:36.020 align:center
So you need to ensure that inject and provide work.

00:57:36.020 --> 00:57:41.138 align:center
Or you manually pass the Pinia instance every time you call

00:57:41.138 --> 00:57:42.179 align:center
a useStore.

00:57:42.179 --> 00:57:45.219 align:center
I think this is a very niche case.

00:57:45.219 --> 00:57:46.360 align:center
It's definitely possible.

00:57:46.360 --> 00:57:50.460 align:center
But it's not something I try very often.

00:57:50.460 --> 00:57:56.420 align:center
Okay. If someone tried it, they can let us know.

00:57:56.819 --> 00:57:59.531 align:center
It would be fun to see the use cases somewhere on the

00:57:59.531 --> 00:58:01.219 align:center
internet. Share them on Twitter.

00:58:02.500 --> 00:58:06.642 align:center
Okay. And we are on to our last question before we share a

00:58:06.642 --> 00:58:08.500 align:center
surprise with all of you.

00:58:09.060 --> 00:58:11.819 align:center
But let's hear the last one.

00:58:11.819 --> 00:58:15.916 align:center
What makes Pinia so different from other state management

00:58:15.916 --> 00:58:16.420 align:center
tools?

00:58:16.420 --> 00:58:26.920 align:center
I think that Pinia is really a couple with Vue.

00:58:26.920 --> 00:58:33.717 align:center
The design goals are really close to what you should be

00:58:33.717 --> 00:58:39.650 align:center
doing with Vue, especially its composition API.

00:58:39.650 --> 00:58:43.707 align:center
And it helps you I think it makes you a better Vue.js

00:58:43.707 --> 00:58:44.549 align:center
developer.

00:58:44.549 --> 00:58:47.779 align:center
The same patterns that you use in Pinia stores can be used

00:58:48.339 --> 00:58:49.449 align:center
in Vue stores.

00:58:49.449 --> 00:58:53.889 align:center
I think I like to stay as close as Vue as possible.

00:58:53.889 --> 00:58:57.210 align:center
And if in the future it needs to disappear or something

00:58:57.210 --> 00:59:00.350 align:center
better replace it, at least you have the knowledge.

00:59:00.350 --> 00:59:03.023 align:center
I mean, you acquired the knowledge that you can still use

00:59:03.023 --> 00:59:03.540 align:center
in Vue.js.

00:59:03.540 --> 00:59:05.219 align:center
And it will probably ease up any

00:59:06.659 --> 00:59:09.058 align:center
possible migration if it has to disappear for any reason,

00:59:09.058 --> 00:59:10.110 align:center
which I hope it doesn't.

00:59:10.900 --> 00:59:13.060 align:center
who knows, right? We never know the future.

00:59:13.060 --> 00:59:14.409 align:center
And this is different from

00:59:16.100 --> 00:59:20.764 align:center
other things. Other state management solutions that are not

00:59:20.764 --> 00:59:22.819 align:center
that close to Vue design.

00:59:23.380 --> 00:59:27.616 align:center
Without talking about the verbosity of things like Redux,

00:59:27.616 --> 00:59:32.046 align:center
of course, which is just on another level of verbosity that

00:59:32.046 --> 00:59:34.899 align:center
it's pain, I would say, in that case.

00:59:35.139 --> 00:59:41.045 align:center
No pain. Enjoy. Enjoy your life. Wow. Nice. Well, that was

00:59:41.045 --> 00:59:44.100 align:center
our last question of the day.

00:59:48.100 --> 00:59:53.770 align:center
Eduardo, thank you so much for answering our questions.

00:59:53.770 --> 00:59:58.382 align:center
Is there anything else you would like to share with us

00:59:58.382 --> 00:59:58.980 align:center
today?

01:00:00.100 --> 01:00:04.949 align:center
Well, we have this one here that is connected to some very

01:00:04.949 --> 01:00:09.657 align:center
special news we are about to share with everyone that is

01:00:09.657 --> 01:00:14.067 align:center
regarding the Mastering Pinia course you created and

01:00:14.067 --> 01:00:18.890 align:center
someone is asking what is covered in the Mastering Pinia

01:00:18.890 --> 01:00:19.579 align:center
course.

01:00:19.580 --> 01:00:24.610 align:center
I think pretty much everything we talk about is covered in

01:00:24.610 --> 01:00:27.819 align:center
a way in the Mastering Pinia course.

01:00:27.819 --> 01:00:31.683 align:center
From the very basics of Pinia, how to use it, but also

01:00:31.683 --> 01:00:34.259 align:center
using it in more complex scenarios.

01:00:34.259 --> 01:00:37.979 align:center
So really going deep into what you can do with PINIA, the

01:00:37.979 --> 01:00:41.777 align:center
best practices and everything that you don't find in other

01:00:41.777 --> 01:00:45.658 align:center
courses, because this is also one of the motivations for me

01:00:45.658 --> 01:00:49.563 align:center
to create the course, is that I'm not really satisfied with

01:00:49.563 --> 01:00:53.038 align:center
how other people teach, I mean at the same time it's

01:00:53.038 --> 01:00:56.379 align:center
normal, how other people teach some PINIA things.

01:00:56.380 --> 01:01:00.229 align:center
I think they could be simpler and then they never really go

01:01:00.229 --> 01:01:03.100 align:center
deep into things that are more complicated.

01:01:03.100 --> 01:01:06.496 align:center
And so I'm taking the challenge of going to more

01:01:06.496 --> 01:01:10.128 align:center
complicated topics like maintaining stores and even

01:01:10.128 --> 01:01:14.373 align:center
practicing that with exercises because I really like when I

01:01:14.373 --> 01:01:17.179 align:center
do workshops, I do a lot of exercises.

01:01:17.179 --> 01:01:21.804 align:center
So I have a lot of exercises to cover these and I try to

01:01:21.804 --> 01:01:25.962 align:center
make them enjoyable with more topics that are more

01:01:25.962 --> 01:01:30.669 align:center
unconventional and having tests that are going to run at

01:01:30.669 --> 01:01:33.779 align:center
the same time as you are developing.

01:01:33.779 --> 01:01:37.567 align:center
Having your own tooling instead of just being within a

01:01:37.567 --> 01:01:41.099 align:center
browser, within a cut-sum box or just a simplified

01:01:41.099 --> 01:01:45.308 align:center
environment, that way you can use everything you're used to

01:01:45.308 --> 01:01:48.019 align:center
and stay close to the tools you love.

01:01:48.020 --> 01:01:49.659 align:center
And what else?

01:01:49.699 --> 01:01:54.808 align:center
I think that's everything about covering Mastering Pinia

01:01:54.808 --> 01:02:00.100 align:center
course, but the news is we're launching very soon, right?

01:02:00.100 --> 01:02:05.699 align:center
Exciting! And we actually have another question about it

01:02:05.699 --> 01:02:11.100 align:center
that is, that said, yeah, that even has a small typo.

01:02:11.100 --> 01:02:16.577 align:center
What kind of exercises are included, yes, in the Mastering

01:02:16.577 --> 01:02:17.900 align:center
Pinia course?

01:02:18.060 --> 01:02:20.661 align:center
The exercises are all about making sure that what is

01:02:20.661 --> 01:02:23.276 align:center
explained, so all the theory is understood, but also

01:02:23.276 --> 01:02:25.956 align:center
practicing things that go beyond. So trying to really

01:02:25.956 --> 01:02:28.969 align:center
challenge yourself with some complicated task and test your

01:02:28.969 --> 01:02:31.420 align:center
knowledge not only in PINIA, but also with VGS.

01:02:41.619 --> 01:02:45.661 align:center
So for example, when it comes to maintainability, you will

01:02:45.661 --> 01:02:49.250 align:center
have exercises that ask you to split the store into

01:02:49.250 --> 01:02:52.839 align:center
multiple ones to have something more maintainable.

01:02:52.860 --> 01:02:55.980 align:center
You will have to build some abstractions that are

01:02:55.980 --> 01:02:59.100 align:center
incomposable and that are used in set-up stores.

01:02:59.100 --> 01:03:03.659 align:center
You have to solve some bugs for server-side rendering.

01:03:03.659 --> 01:03:07.146 align:center
And all of these in interactive exercises in your local

01:03:07.146 --> 01:03:10.787 align:center
environment with automated tests, so you can check on the

01:03:10.787 --> 01:03:14.287 align:center
go as you progress the exercise if you're missing some

01:03:14.287 --> 01:03:15.259 align:center
things or not.

01:03:16.259 --> 01:03:17.259 align:center
Exciting.

01:03:17.259 --> 01:03:18.259 align:center
Okay.

01:03:18.259 --> 01:03:19.259 align:center
Let's see.

01:03:19.259 --> 01:03:20.259 align:center
Before we spoil the surprise.

01:03:20.259 --> 01:03:22.580 align:center
And we have some Nuxt as well in the Mastering Pinia.

01:03:22.580 --> 01:03:23.580 align:center
People are asking in the chat.

01:03:23.580 --> 01:03:24.580 align:center
Oh, asking in the chat.

01:03:24.580 --> 01:03:25.580 align:center
Oh, yes.

01:03:25.580 --> 01:03:26.580 align:center
We will cover.

01:03:26.580 --> 01:03:30.126 align:center
Did you say we will cover Nuxt in the Mastering PINIA

01:03:30.126 --> 01:03:31.130 align:center
course, right?

01:03:31.139 --> 01:03:32.139 align:center
Yeah.

01:03:32.139 --> 01:03:34.100 align:center
There is a part about Nuxt.

01:03:34.100 --> 01:03:36.785 align:center
Everything else applies to both Nuxt and non-Nuxt, but

01:03:36.785 --> 01:03:39.619 align:center
there is a section about, there is a chapter about Nuxt.

01:03:39.619 --> 01:03:40.619 align:center
Awesome.

01:03:40.619 --> 01:03:41.619 align:center
Very exciting.

01:03:41.619 --> 01:03:42.619 align:center
Okay.

01:03:42.980 --> 01:03:43.980 align:center
Okay.

01:03:43.980 --> 01:03:49.779 align:center
I think it's time to spoil the surprise, right, Eduardo?

01:03:49.779 --> 01:03:50.779 align:center
Yeah.

01:03:50.779 --> 01:03:54.579 align:center
So, are you saying it or should I say it?

01:03:54.580 --> 01:03:55.580 align:center
You can say it.

01:03:55.580 --> 01:03:58.779 align:center
I'll give you the privilege to say it.

01:03:58.779 --> 01:04:02.744 align:center
So we're launching with a very, what's the word in English,

01:04:02.744 --> 01:04:06.753 align:center
beneficial, a very nice deal, a pre-order sale, a very nice

01:04:06.753 --> 01:04:08.859 align:center
pre-order sale on October 3rd.

01:04:08.860 --> 01:04:11.460 align:center
And it's only a 24-hour sale.

01:04:11.460 --> 01:04:15.440 align:center
So if you're really interested, you should sign up on the

01:04:15.440 --> 01:04:15.860 align:center
site.

01:04:15.860 --> 01:04:19.121 align:center
You get an email when the sale is up, or you just mark it

01:04:19.121 --> 01:04:22.464 align:center
in a calendar if you don't want to send the email and just

01:04:22.464 --> 01:04:25.853 align:center
go there on 3rd, but make sure not to miss it because it's

01:04:25.853 --> 01:04:26.730 align:center
only 24 hours.

01:04:26.739 --> 01:04:27.739 align:center
Oh, exciting.

01:04:27.739 --> 01:04:28.739 align:center
Thank you, Eduardo.

01:04:28.739 --> 01:04:29.739 align:center
This has been amazing.

01:04:29.739 --> 01:04:30.545 align:center
So many in-depth questions and thoughts that can be shared

01:04:30.545 --> 01:04:30.739 align:center
even further.

01:04:30.739 --> 01:04:41.092 align:center
We are very grateful for you to take in the time to answer

01:04:41.092 --> 01:04:47.339 align:center
these questions for our community.

01:04:47.339 --> 01:04:49.060 align:center
And yeah, thanks for joining.

01:04:49.060 --> 01:04:55.420 align:center
I wish you an awesome day and we will see you again soon.

01:04:55.420 --> 01:04:56.420 align:center
Yeah.

01:04:56.420 --> 01:04:57.779 align:center
I wish everybody a nice day.

01:04:57.779 --> 01:05:00.703 align:center
Thanks for the sweet comments also in there, and I'm

01:05:00.703 --> 01:05:03.569 align:center
reading them, but I cannot reply at the same time.

01:05:03.580 --> 01:05:04.580 align:center
But thanks a lot.

01:05:04.580 --> 01:05:05.580 align:center
I really appreciate it.

01:05:05.580 --> 01:05:06.580 align:center
Awesome.

01:05:06.580 --> 01:05:07.580 align:center
Thank you so much, Eduardo.

01:05:07.580 --> 01:05:08.580 align:center
See you soon.

01:05:08.580 --> 01:05:09.580 align:center
Bye-bye.

01:05:09.580 --> 01:05:10.580 align:center
Okay.

01:05:10.580 --> 01:05:18.064 align:center
So that was the Q&A session, the first ever we did with

01:05:18.064 --> 01:05:23.779 align:center
Eduardo, and we hope that you enjoyed it.

01:05:24.380 --> 01:05:28.722 align:center
Thank you so much, everyone who took their time to come

01:05:28.722 --> 01:05:33.379 align:center
here, ask their questions, and stay with us for this hour.

01:05:33.380 --> 01:05:38.290 align:center
Please don't forget the exciting reveal that Eduardo just

01:05:38.290 --> 01:05:38.980 align:center
shared.

01:05:38.980 --> 01:05:43.584 align:center
We are pre-launching the course and having our pre-order

01:05:43.584 --> 01:05:46.379 align:center
special launching on October 3rd.

01:05:46.380 --> 01:05:49.850 align:center
It will be available only for 24 hours, so make sure not to

01:05:49.850 --> 01:05:50.379 align:center
miss it.

01:05:50.380 --> 01:05:54.375 align:center
This will be the only chance that you will get to sign up

01:05:54.375 --> 01:05:57.179 align:center
and purchase the course for this price.

01:05:57.179 --> 01:06:00.474 align:center
So, yeah, looking forward to hearing your thoughts about

01:06:00.474 --> 01:06:01.179 align:center
everything.

01:06:01.179 --> 01:06:05.179 align:center
Let us know, and keep these questions coming.

01:06:05.179 --> 01:06:09.960 align:center
We will definitely store them and see how we can talk to

01:06:09.960 --> 01:06:12.179 align:center
you again some more soon.

01:06:12.179 --> 01:06:14.179 align:center
Thanks, everyone, for joining.

01:06:14.179 --> 01:06:17.346 align:center
Hope to see you again soon, and have a great rest of your

01:06:17.346 --> 01:06:18.179 align:center
day, everyone.

01:06:20.380 --> 01:06:22.179 align:center
Bye.