DEV Community

Using Modules and Pinia to structure Nuxt 3 app

Jakub Andrzejewski on January 17, 2022

Building a Hello World application in Nuxt 3 is relatively simple, but you will most probably reach a stage in your project where you will need to ...

Read full post

Alexander Kim • Mar 13

Hey, is it possible to install another module in my module?

    await installModule('@nuxtjs/tailwindcss', {
      exposeConfig: true,
    })

i initially thought this would be installing this module automatically, when i'm using my module inside another app by including it nuxt.config.ts:

modules: ['@someorg/my-module']

but looks like it won't install this module automatically. Is there a way to do so?

Jakub Andrzejewski • Mar 14

Hey there,

I am using this approach in my Nuxt Security module where I use the module for CSRF detection.

github.com/Baroshem/nuxt-security/...

Maybe this will help you. The module is also installed in the project package.json file.

Alexander Kim • Mar 14

installModule just installs the module in a consumer app's nuxt.config.ts modules section right? But as i figured out, you have to install module dependency manually anyway

Jakub Andrzejewski • Mar 15

Yes, you have to install it manually in the package.json in order for it to be available.

CthulhuDev • Apr 6 '22

Great article!
Modules in nuxt3 are so cool.
It would be great to explore how to divide a complex application (let's say, an ecommerce JAMStack webapp) into handy submodules.

Just a quick thing: I think buildModules in nuxt config is going to be discouraged in nuxt3 since every module is now a build module. Am I correct?

Jakub Andrzejewski • Apr 7 '22

Yes you are right. From now on, you can use normal modules instead.

I am waiting for the release of Nuxt 3 with RC version that will support SSG. When it will be available, then I will make such an article :)

CthulhuDev • Apr 7 '22

It's already available since some hours ago ❤️

Leonardo • Feb 16 '23

One of the greatest features Nuxt has is folder based routing.

But with this module example, we need to register all routes manually:

nuxt.hook('pages:extend', (pages) => {
  pages.push({
    name: 'blog-page',
    path: '/blog/:id',
    file: resolve(__dirname, './pages/blog/[id].vue')
  })
})

is there a way to automatic create a route for every file inside the pages directory?``

andyjamesn • May 29 '22

Could you explain a little about how the Pinia integration works?

In the module.ts you state

// Pinia store modules are auto imported

How are they setup to auto import? Is it because useBlogStore is being imported in the blob/[id] component?

Is it possible to use Pinia without a component in the module to store data eg: logged in user data and access it from components in the main app that is importing the module?

Jakub Andrzejewski • May 30 '22

So basically Pinia works in all places no matter where you import it in your application. If you import it in the module, this value will be then accessible from somewhere else. It is done because Pinia is a store that can be accessible from anywhere in the app.

Yes, it is possible to use Pinia without a component. It can be used in the composables as well or page. I just showed it as an example of usage :)

andyjamesn • May 30 '22

Excellent thank you! I did dive deep into their docs and came to this conclusion. I essentially import the stores in my plugin.ts file inside defineNuxtPlugin with const auth = useAuthStore(nuxtApp.$pinia)

This adds the store globally and then it is accessible anywhere in the app.

andyjamesn • May 18 '22

Does this method still work on the latest 3.0.0-rc.3

I am getting the following error. I have reproduced it with identical code as described in this tutorial.

ERROR Cannot restart nuxt: Nuxt module should be a function: [object Object] 15:05:41

at normalizeModule (/Users/A/FlowR/ui-kit-repos/flowr-app/node_modules/@nuxt/kit/dist/index.mjs:417:11)
at installModule (/Users/A/FlowR/ui-kit-repos/flowr-app/node_modules/@nuxt/kit/dist/index.mjs:397:47)
at initNuxt (/Users/A/FlowR/ui-kit-repos/flowr-app/node_modules/nuxt/dist/index.mjs:1336:13)
at async load (/Users/A/FlowR/ui-kit-repos/flowr-app/node_modules/nuxi/dist/chunks/dev.mjs:6734:9)
at async _applyPromised (/Users/A/FlowR/ui-kit-repos/flowr-app/node_modules/nuxi/dist/chunks/dev.mjs:6686:10)

Jakub Andrzejewski • May 18 '22

Hey,

I wrote this article some time ago and the structure of nuxt.config.ts file changed a bit. Basically if you have a nuxt 3 rc.3 project the only thing you have to change is from buildModules to modules and do not use object syntax to define a local module but just use a path i.e.

  modules: [
    '@pinia/nuxt',
    '~/modules/blog/module'
  ]

Thans for noticing that. I will update the article to be up to date :)

andyjamesn • May 18 '22

Thanks, I managed to work it out by looking at the git repository you linked to in your article.

One other thing worth mentioning is I had to do was yarn add @nuxt/kit

intermundos • Oct 9 '22

Nuxt 3 is a complete disappointment. Lack of documentation, lots of errors and behaviours. Started new project and threw it in a trash bin. Sveltekit look more friendlier and usable from the start.

Jakub Andrzejewski • Oct 10 '22

Wow, I am pretty sad to read it. Could you tell me more why you did not like the experience?

intermundos • Nov 21 '22

I will try to explain.

This is my 2nd time I try to use Nuxt 3.

Documentation is lacking and unclear
Things just don't work - I have useFetch in page to fetch data from API. When I open the app on this route, nothing is fetched, when I switch to other route and come back, data is fetched.
No clear separation between client/server

These 3 are enough. Nuxt 3 feels very raw. Sveltekit IMHO does these thing in a more elegant and clear way.

Jakub Andrzejewski • Nov 24 '22

I am sad that this is your experience with Nuxt 3 but I completely understand that you can have different (sometimes better) experience with other tools and you are completely fine with that! These tools are learning from each other constantly so I expect Nuxt 3 to become the same level quite soon :)

BenyaminRmb • Jan 17 '22

why should we use this instead of vuex ?

Jakub Andrzejewski • Jan 17 '22

Hi Benyamin,

Pinia is recommended approach as a state management tool for Vue 3 also recommended by Evan You as it works really well with Composition API. You can check out the explanation video here -> youtu.be/2KBHvaAWJOA?t=896

Also, I think that you can easily switch it to Vuex and then import the store using a plugin as it is done in the bonus links.

IBM51OO • May 9 '23

Hello, thanks for the article, I had a problem when in the page that is declared in the module, declared middleware through definePageMeta, I get an warning:
definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing
it at runtime has no effect.
If anyone knows how to fix it ?

RodrigoBlanco • Jul 19 '22 • Edited

Hi, Jakub! I followed your guide and I getting an issue when I try to add tailwind classes inside a page from a module. If I use a tailwind class in app.vue file, works correctly. Why can happen this?

Jakub Andrzejewski • Jul 19 '22

Hmm, this is rather strange. Could you tell me a bit more about this issue? Are they not working or is there any bug in the terminal?