2017-08-15 19 views
0

首次使用nuxt。我正在嘗試添加客戶端庫。如何在Nuxt中添加客戶端js庫>

在一個正常的html中,我只是將它添加到我的index.html文件中。但我不知道如何在nuxt上做同樣的事情。

如何添加?

這是我的配置

module.exports = { 

    /* 
    ** Headers of the 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 the 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)/ 
     }) 
     } 
    } 
    } 
} 

回答

1

根據NuxtJS文檔:https://nuxtjs.org/guide/plugins

我可以證實這一點的工作,但一些插件還是扔在頁面的第3次刷新錯誤,錯誤的是走了,我不知道原因。

客戶端僅

一些插件可能只工作了瀏覽器,就可以使用SSR:在插件 假選項僅在客戶端運行該文件。

例子:

nuxt.config.js:

module.exports = { 
    plugins: [ 
    { src: '~/plugins/vue-notifications', ssr: false } 
    ] 
} 

插件/ VUE-notifications.js:

import Vue from 'vue' 
import VueNotifications from 'vue-notifications' 

Vue.use(VueNotifications) 

如果您需要需要一些圖書館只對服務器,當你創建server.bundle.js文件時,你的 可以使用設置爲true的process.server變量爲 。