Difference between plugins and composables ?

[nova terrace]

Hello there !
I don't understand what's the difference between plugins and composables.
I've watched videos, I've read articles, but I still don't understand when to use one or the other, what are the best practices, and the things I shouldn't do?

Any help ? Thanks !

[copper kite]

Simply put, plugins and composables are Vue part of the Nuxt framework (except the plugins folder inside the server folder). It would help to look for an answer in the Vue documentation first.
For example,

• https://vuejs.org/guide/reusability/composables.html

As I understand, composables are a set of reusable stateful logic. You have some logic that you use in several parts of the front-end part of your application, and the logic depends on reactive data.
Plugins are somewhat a mix of both Nuxt and Vue. But I would say plugins are used to extend the Vue part of your application or add self-contained logic that you want to initialize once the application has started. For example, I use a Nuxt plugin to ping-pong the server to determine if the user session is active or not. I can trigger reactive data change based on the server response (for example, If the session has expired, I redirect the user to the login page automatically).

[nova terrace]

thanks for your answer, unfortunately I still don't understand, it feels like everyone tells the same thing when explaining the difference, but it's this thing, or this way of explaining, that I don't understand

[grizzled roost]

Compisables - a replacement for mixin from vue2
Plugin - extending Vue instance and more

Provide real problems you have encountered and we will try to tell you what is better to use: composable, plugin, middleware, module, etc.

[nova terrace]

I've been using composables all the time and now I'm trying to do better code. For example, I call a composable useUserData() to fetch user prefs (like name, ui prefs, etc)

this composable does :

• create useState('userData')
• fetch data
• add data to userState('userData')

now I'm exploring pinia and plugins, I feel like I should replace my composable, so it only fetches data, and I do all the useState stuff in my pinia store (not useState anymore then)

[grizzled roost]

I would use the built-in compsable useAsyncData, and get the data in other components using useNuxtData

Or yes, try pinia to store global data, but only global data

[nova terrace]

yeah the problem for me is the lack of real life example, so I can feel the diff between then.
My app is hosted on netlify, so it's an ssr: false app, maybe that explains why I'm so confused ?

my app could need to check every x secondes if anything new in the database. Could this be a plugin case ?

[grizzled roost]

Yeah, for the plugin, it's fine.
in the plugin you can work with useState, useAsyncData, pinia (only there is a nuance #1156571361196650557 message)

At the same time, nobody prevents you from putting the logic of data storage and polling into composable BUT use it in a plugin ))

[nova terrace]

ok, and a plugin can act by itself ? I can create a plugin so it will check every x seconds, and it will run data fetching etc automatically ?

[grizzled roost]

A plugin in the context of Nuxt 3, this is a place that is called 1 time when a client requests it

So you could say that this is an additional life-cycle hook for your application

https://miro.medium.com/v2/resize:fit:1400/format:webp/1*v-pnTrIP-Kq29k52BIGp8g.png

[nova terrace]

ah, ok, now I'm starting to understand something

[grizzled roost]

Don't hesitate to ask.

[nova terrace]

so a plugin could check if user is connected, if so fetch user pref data, and store data in pinia store ?

[grizzled roost]

On the whole, yes, I agree.
it's hard when there are +100500 ways to do something, it's a little confusing.

[grizzled roost]

Yes, you can in the plugin.
you can also do it in global route middleware https://nuxt.com/docs/guide/directory-structure/middleware or app.vue
)))

[nova terrace]

yes, it's confusing, mainly because something that works doesn't mean it's designed as it should...
thanks a lot. I'm starting to get something. I'll do some tests on my app to integrate that and I will come back later, thanks again for helping me

[nova terrace]

am I right if I say app.vue comes after global route middleware, that comes after plugins ?

[grizzled roost]

++

[nova terrace]

😅

[grizzled roost]

yes, so I get the global data in the plugin (calling useAsyncData)

[nova terrace]

I feel less confused, thanks a lot mate

I'll try to implement what I thing I understood thanks to you !