DEV Community

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

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...
Collapse
 
bacodekiller profile image
Quang Hiep • Edited

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

Collapse
 
radonirinamaminiaina profile image
Radonirina Maminiaina

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

Collapse
 
bacodekiller profile image
Quang Hiep

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

Thread Thread
 
radonirinamaminiaina profile image
Radonirina Maminiaina

The simplest way is using localstorage to save your token.

Thread Thread
 
bacodekiller profile image
Quang Hiep

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

Thread Thread
 
radonirinamaminiaina profile image
Radonirina Maminiaina

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

Thread Thread
 
bacodekiller profile image
Quang Hiep

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

Thread Thread
 
radonirinamaminiaina profile image
Radonirina Maminiaina

You can see this doc

Collapse
 
raphaelnikson profile image
Raphael Nikson • 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()

Enter fullscreen mode Exit fullscreen mode
Collapse
 
cramydev profile image
cramydev

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

Collapse
 
radonirinamaminiaina profile image
Radonirina Maminiaina

Yes, this works with typescript

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

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

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

Collapse
 
radonirinamaminiaina profile image
Radonirina Maminiaina

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

Collapse
 
geminii profile image
Jimmy

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

Collapse
 
radonirinamaminiaina profile image
Radonirina Maminiaina

Thank you

Collapse
 
aech12 profile image
Alex Howez

Another negative is that this gets pretty overcrowded

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

Collapse
 
slidenerd profile image
slidenerd

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

Collapse
 
lambchamps profile image
lambchamps • 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