Add plugin ssr option & rename process.browser

TODO.md

@@ -17,3 +17,20 @@ Release:
 ## Deprecated
 - `process.BROWSER_BUILD` is deprecated in favour of `process.browser` (`BROWSER_BUILD` will be removed for the 1.0)
 - `process.SERVER_BUILD` is deprecated in favour of `process.server` (`SERVER_BUILD` will be removed for the 1.0)
+
+## Define `plugins` only for client-side
+
+Some Vue plugins might only work for client-side, you can now use an `Object` instead of a string to use a plugin only for client-side:
+
+`nuxt.config.js`
+```js
+module.exports = {
+  plugins: [
+    '~plugins/client-and-server.js',
+    {
+      src: '~plugins/only-client-side.js',
+      ssr: false // disable for server-side
+    }
+  ]
+}
+```

examples/plugins-vendor/nuxt.config.js

@@ -3,6 +3,7 @@ module.exports = {
     vendor: ['axios', 'mini-toastr', 'vue-notifications']
   },
   plugins: [
-    '~plugins/vue-notifications.js'
+    // ssr: false to only include it on client-side
+    { src: '~plugins/vue-notifications.js', ssr: false }
   ]
 }

examples/plugins-vendor/pages/index.vue

@@ -7,7 +7,7 @@
 
 <script>
 let miniToastr
-if (process.BROWSER_BUILD) {
+if (process.browser) {
   miniToastr = require('mini-toastr')
 }
 

examples/plugins-vendor/plugins/vue-notifications.js

@@ -1,26 +1,23 @@
 // This code will be injected before initializing the root App
 import Vue from 'vue'
 import VueNotifications from 'vue-notifications'
+// Include mini-toaster (or any other UI-notification library
+import miniToastr from 'mini-toastr'
 
-if (process.BROWSER_BUILD) {
-  // Include mini-toaster (or any other UI-notification library
-  const miniToastr = require('mini-toastr')
-
-  // Here we setup messages output to `mini-toastr`
-  const toast = function ({ title, message, type, timeout, cb }) {
-    return miniToastr[type](message, title, timeout, cb)
-  }
-
-  // Binding for methods .success(), .error() and etc. You can specify and map your own methods here.
-  // Required to pipe our outout to UI library (mini-toastr in example here)
-  // All not-specified events (types) would be piped to output in console.
-  const options = {
-    success: toast,
-    error: toast,
-    info: toast,
-    warn: toast
-  }
-
-  // Activate plugin
-  Vue.use(VueNotifications, options)
+// Here we setup messages output to `mini-toastr`
+const toast = function ({ title, message, type, timeout, cb }) {
+  return miniToastr[type](message, title, timeout, cb)
 }
+
+// Binding for methods .success(), .error() and etc. You can specify and map your own methods here.
+// Required to pipe our outout to UI library (mini-toastr in example here)
+// All not-specified events (types) would be piped to output in console.
+const options = {
+  success: toast,
+  error: toast,
+  info: toast,
+  warn: toast
+}
+
+// Activate plugin
+Vue.use(VueNotifications, options)

lib/app/App.vue

@@ -12,7 +12,7 @@ let layouts = {
 <%
 var layoutsKeys = Object.keys(layouts);
 layoutsKeys.forEach(function (key, i) { %>
-  "_<%= key %>": process.BROWSER_BUILD ? () => System.import('<%= layouts[key] %>') : require('<%= layouts[key] %>')<%= (i + 1) < layoutsKeys.length ? ',' : '' %>
+  "_<%= key %>": process.browser ? () => System.import('<%= layouts[key] %>') : require('<%= layouts[key] %>')<%= (i + 1) < layoutsKeys.length ? ',' : '' %>
 <% }) %>
 }
 

lib/app/index.js

@@ -25,7 +25,7 @@ Vue.use(Meta, {
   tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
 })
 
-if (process.BROWSER_BUILD) {
+if (process.browser) {
   // window.onNuxtReady(() => console.log('Ready')) hook
   // Useful for jsdom testing or plugins (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
   window._nuxtReadyCbs = []
@@ -35,8 +35,16 @@ if (process.BROWSER_BUILD) {
 }
 
 // Includes external plugins
-<% plugins.forEach(function (pluginPath) { %>
-require('<%= pluginPath %>')
+<% plugins.forEach(function (plugin) {
+  if (typeof plugin === 'string') { %>
+    require('<%= plugin %>')
+  <% } else if (plugin.src && plugin.ssr !== false) { %>
+    require('<%= plugin.src %>')
+  <% } else if (plugin.src) { %>
+    if (process.browser) {
+      require('<%= plugin.src %>')
+    }
+  <% } %>
 <% }) %>
 
 // root instance

lib/app/router.js

@@ -23,7 +23,7 @@ function recursiveRoutes(routes, tab, components) {
 var _components = []
 var _routes = recursiveRoutes(router.routes, '\t\t', _components)
 uniqBy(_components, '_name').forEach((route) => { %>
-const <%= route._name %> = process.BROWSER_BUILD ? () => System.import('<%= route.component %>') : require('<%= route.component %>')
+const <%= route._name %> = process.browser ? () => System.import('<%= route.component %>') : require('<%= route.component %>')
 <% }) %>
 
 <% if (router.scrollBehavior) { %>

lib/build.js

@@ -198,7 +198,12 @@ function * generateRoutesAndFiles () {
     middleware: this.options.middleware,
     store: this.options.store,
     css: this.options.css,
-    plugins: this.options.plugins.map((p) => r(this.srcDir, p)),
+    plugins: this.options.plugins.map((p) => {
+      if (typeof p === 'string') {
+        return { src: r(this.srcDir, p), ssr: true }
+      }
+      return { src: r(this.srcDir, p.src), ssr: !!p.ssr }
+    }),
     appPath: './App.vue',
     layouts: layouts,
     loading: (typeof this.options.loading === 'string' ? r(this.srcDir, this.options.loading) : this.options.loading),