DEV Community

Nuxt like a pro. Use service pattern (My Best practice)

Radonirina Maminiaina on March 15, 2021

Intro We all know that NuxtJS is an awesome framework. Unlike Angular which has a well structured folder for services, nuxt doesn't. But...

Read full post

Quang Hiep • Mar 23 '21 • Edited

how to use it with Interceptors axios for refresh token when "token is invalid"? And save token, refresh token to cookies?

Radonirina Maminiaina • Mar 23 '21

You can use interceptor and in onResponse you can check if your token is valid or not.

Quang Hiep • Mar 24 '21

yes. when refresh token success but should I save token to vuex or cookies? thanks.

Radonirina Maminiaina • Mar 24 '21

The simplest way is using localstorage to save your token.

Quang Hiep • Mar 25 '21

But localStorage is client-side. How can i save it from server nuxtjs?

Radonirina Maminiaina • Mar 25 '21

You can use this lib and use cookie for saving the info within nuxt server

Quang Hiep • Mar 26 '21

can you give an example using lib or project using lib? tks you

Radonirina Maminiaina • Mar 26 '21

You can see this doc

Raphael Nikson • Sep 18 '22 • Edited

import roles from '@/services/roles'
import users from '@/services/users'

export default ( { $axios }, inject) => {

    let services = {
        roles: {
            ...roles($axios)
        },
        users: {
            ...users($axios)
        }
    }

    const methods = Object.keys(services)

    methods.forEach((name) => {
        inject(name, services[name])
    })

}

// component 

await this.$roles.index()
await this.$users.index()

cramydev • Oct 11 '21

Hello guys, I have a question. This structure works also with typescript? Or it is necessary to do some modification?

Radonirina Maminiaina • May 31 '22

Yes, this works with typescript

Pacharapol Withayasakpunt • Mar 16 '21

I use openapi-client-axios + openapi.json (i.e. Swagger) + TypeScript (optional).

But I don't know how to inject to $axios.

Radonirina Maminiaina • Mar 16 '21

You can use nuxtjs/axios module and follow the installation intruction

Jimmy • Mar 15 '21

It’s a great best practices that i apply on my project but i precise a prefix due to multiple services. Nice sharing 👍

Radonirina Maminiaina • Mar 16 '21

Thank you

Alex Howez • Sep 19 '22

Another negative is that this gets pretty overcrowded

It'd be better if you could do this.$services.user.getUsers()

slidenerd • Jun 8 '21

nice post! can you add an example of how you ll test this service using vue-test-utils?

lambchamps • May 6 '23 • Edited

I like the pattern. What is your approach when runtimeconfig/environment variables is needed? I'm having a problem how composables are not available outside script setup. My bad it's for nuxt 3