Nuxt.js

[nikolaynesov]

Hi,

I found demo with Nuxt.js example, but looks like it's not finished.
Is there any way to use it with Nuxt.js? Working Middleware?
In my nuxt config I have these plugins:

plugins: [
      {src: '~plugins/vue-bootstrap', ssr:false},
      {src: '~plugins/vue-resource', ssr:false},
      {src: '~plugins/vue-auth', ssr:false}
  ],

ssr is disabled for them.

The plugin itself:

import Vue from 'vue';
import VueAuth from '@websanova/vue-auth';

export default (router) => {

    Vue.router = router.app.router;

    Vue.use(VueAuth, {
        auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
        http: require('@websanova/vue-auth/drivers/http/vue-resource.1.x.js'),
        router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
    });
}

[websanova]

Hey, Ya, I never got far with it, and gave up.

…

On Sun, Apr 15, 2018, 04:49 Nikolay ***@***.***> wrote: Hi, I found demo with Nuxt.js example, but looks like it's not finished. Is there any way to use it with Nuxt.js? Working Middleware? I my nuxt config I have these plugins: plugins: [ {src: '~plugins/vue-bootstrap', ssr:false}, {src: '~plugins/vue-resource', ssr:false}, {src: '~plugins/vue-auth', ssr:false} ], ssr is disabled for them. The plugin itself: import Vue from 'vue'; import VueAuth from ***@***.***/vue-auth'; export default (router) => { Vue.router = router.app.router; Vue.use(VueAuth, { auth: ***@***.***/vue-auth/drivers/auth/bearer.js'), http: ***@***.***/vue-auth/drivers/http/vue-resource.1.x.js'), router: ***@***.***/vue-auth/drivers/router/vue-router.2.x.js'), }); } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#356>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABkcy13xADV7YmlwzhtxtWx6QlmHbDz-ks5tom7ngaJpZM4TVPS3> .

[websanova]

Ya, I'm not really sure, and it's been a while since I took a look at Nuxt anyway.

…

On Sun, Apr 15, 2018 at 11:06 PM, Nikolay ***@***.***> wrote: As far as I understand we don’t have a router config in NUXT so there is no way to set priveldges? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#356 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABkcyx9h8yc8GwmuDFgcmFlTNOUhldvTks5to3AbgaJpZM4TVPS3> .

[nikolaynesov]

I found a way to hook into routes. It is actually documented, but the main problem is the order when the plugins are initiated. It just doesn't work when we put vue-auth into plugin export, but when it's outside, the router and other stuff is not defined yet. I gave up with the integration and wrote my own solution based on nuxt middlewares and vuex.
If anybody has a working solution for vue-auth please share.

[mrtnzagustin]

@nikolaynesov do you still use that solution you wrote? @websanova did the pr solve the problem?

[mrtnzagustin]

I was trying https://auth.nuxtjs.org/ but i find more complete vue-atuh library, i'll try some examples.

[lucasmenares]

For those who are still having trouble configuring Vue Auth with Nuxt 2, I've found a solution:

First of all, install @nuxtjs/axios and @websanova/vue-auth using npm or yarn.

Then, add @nuxtjs/axios to the modules section in your nuxt.config.js file:

// File path 'nuxt.config.js'
modules: [
  // ...
  '@nuxtjs/axios',
],

Next, create a plugin. In this plugin, you need to import Vue and VueAuth. Later, you should export an anonymous function. This function will receive an object with app and $axios as arguments (app represents the Nuxt app, and $axios represents the instance used by @nuxtjs/axios globally). We will use these arguments to set Vue.router and Vue.axios so that we can use them with VueAuth. Here's an example:

// File path  '~/plugins/auth.js',
import Vue from 'vue';
import VueAuth from '@websanova/vue-auth';

export default ({ app, $axios }) => {
  Vue.router = app.router;
  Vue.axios = $axios;
  Vue.use(VueAuth, {
    auth: require('@websanova/vue-auth/drivers/auth/devise.js'),
    http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js')
  });
}

The auth, http, and router are just the drivers that VueAuth needs to work properly.

Now, you just need to import the plugin in your nuxt.config.js file and set ssr: false so that the plugin will be rendered on the client-side and not on the server-side:

// File path 'nuxt.config.js'
plugins: [
    // ...
    { src: '~/plugins/auth.js', ssr: false},
  ],

And that should be it! Remember to restart your development server, and everything should work fine. Remember to call this.$auth after the SSR (Server-Side Rendering) is done. You can use if (process.client) to ensure it's only called on the client-side.