nuxt.js - How do i add client side js libraries in Nuxt> -
first time on nuxt. trying add client side library.
in normal html add index.html file. have no idea how do same on nuxt.
how add it?
this config
module.exports = { /* ** headers of page */ head: { title: 'digglu', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'social media site' }, { name: 'google-signin-client_id', content:'xxx.apps.googleusercontent.com' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** customize progress-bar color */ loading: { color: '#3b8070' }, /* ** build configuration */ build: { /* ** run eslint on save */ extend (config, ctx) { if (ctx.dev && ctx.isclient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } } }
according nuxtjs documentation: https://nuxtjs.org/guide/plugins
i can confirm works, plugins still throw error on first 3 refreshes of page, error gone, don't know reason.
client-side only
some plugins might work browser, can use ssr: false option in plugins run file on client-side.
example:
nuxt.config.js:
module.exports = { plugins: [ { src: '~/plugins/vue-notifications', ssr: false } ] }
plugins/vue-notifications.js:
import vue 'vue' import vuenotifications 'vue-notifications' vue.use(vuenotifications)
in case need require libraries server, can use process.server variable set true when webpack creating server.bundle.js file.
Comments
Post a Comment