Static GitHub Issues

[537] FeatherJS Client globally not visible

prev: Unexpected token export
next: Some advices on making nuxt more programmatic friendly

Hi Guys, I am totally new to nuxt.js.Tried to integrate nuxt.js with featherjs successfully when i tried to include featherjs client as plugin so that i could call it globally across all my component's it's not attaching to the VueJS instance, my package.json { "name": "nuxt-i18n", "dependencies": { "axios": "^0.15.3", "bootstrap": "^3.3.7", "feathers": "^2.1.1", "feathers-client": "^2.0.0-pre.2", "feathers-localstorage": "^1.0.0", "feathers-socketio": "^1.5.2", "jquery": "^3.2.1", "nuxt": "latest", "socket.io-client": "^1.7.3" }, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start" } }

my nuxt.config.js const webpack = require('webpack')

module.exports = { loading: { color: 'green' }, router: { middleware: 'i18n' }, build: { vendor: 'axios','jquery', 'bootstrap','socket.io-client','feathers','feathers-client','feathers-hooks','feathers-socketio','feathers-authentication-client', plugins: // set shortcuts as global for bootstrap new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) }, css: 'bootstrap/dist/css/bootstrap.css', plugins: {src: '~plugins/bootstrap.js',ssr:false}, {src:'~plugins/i18n',ssr:true}, {src:'~plugins/feathers',ssr:false} }

my plugins/feathers.js import feathers from 'feathers/client'; import hooks from 'feathers-hooks'; import socketio from 'feathers-socketio/client'; import io from 'socket.io-client'; import localstorage from 'feathers-localstorage'; import authentication from 'feathers-authentication-client'; import Vue from 'vue'

if (process.BROWSER_BUILD) { const client = feathers(). configure(socketio(io("http://localhost:3030"))). configure(hooks()). configure(authentication({ storage: window.localStorage })); console.log("Loading Feather's Client Globally"); Vue.prototype.$feathersClient = function () { console.log("Returning Client"); return client; } }

My Home.vue which is the one throwing error,

<template> <div class="Content"> <div class="container"> <h1 class="Content__Title">{{ $t('home.title') }}</h1> <p>{{ $t('home.introduction') }}</p> <button v-on:click="authenticate">Login</button> </div> </div> </template>
<script> export default { methods: { authenticate: function(event) { this.feathersClient().authenticate({ strategy: 'local', username: 'admin', password: 'admin' }) .then(response => { console.log('Authenticated!', response); return app.passport.verifyJWT(response.accessToken); }) .then(payload => { console.log('JWT Payload', payload); }) .catch(function(error) { console.error('Error authenticating!', error); }); } } } </script>
<style> .Content { padding: 50px 0; text-align: center; } .Content__Title { font-weight: 300; padding-bottom: 30px; } </style>

Can someone throw some light on what mistake am i doing....

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c463">#c463</a>)</em></sub></div>