Update plugins-vendor example (now working)

examples/plugins-vendor/README.md

@@ -20,14 +20,14 @@ module.exports = {
 
 > Nuxt.js allows you to define js plugins to be ran before instantiating the root vue.js application
 
-I want to use [vee-validate](https://github.com/logaretm/vee-validate) to validate the data in my inputs, I need to setup the plugin before launching the app.
+I want to use [vue-notifications](https://github.com/se-panfilov/vue-notifications) to validate the data in my inputs, I need to setup the plugin before launching the app.
 
-File `plugins/vee-validate.js`:
+File `plugins/vue-notifications.js`:
 ```js
 import Vue from 'vue'
-import VeeValidate from 'vee-validate'
+import VueNotifications from 'vue-notifications'
 
-Vue.use(VeeValidate)
+Vue.use(VueNotifications)
 ```
 
 Then, I add my file inside the `plugins` key of `nuxt.config.js`:
@@ -35,24 +35,24 @@ Then, I add my file inside the `plugins` key of `nuxt.config.js`:
 const { join } = require('path')
 
 module.exports = {
-  vendor: ['vee-validate'],
-  plugins: [ join(__dirname, './plugins/vee-validate') ]
+  vendor: ['vue-notifications'],
+  plugins: [ join(__dirname, './plugins/vue-notifications') ]
 }
 ```
 
-I added `vee-validate` in the `vendor` key to make sure that it won't be included in any other build if I call `require('vee-validate')`` in a component.
+I added `vue-notifications` in the `vendor` key to make sure that it won't be included in any other build if I call `require('vue-notifications')` in a component.
 
 ### Only in browser build
 
-Some plugins might work only in the browser, for this, you can use the `process.BROWSER` variable to check if the bundle will be for the server or the client.
+Some plugins might work only in the browser, for this, you can use the `process.BROWSER` variable to check if the plugin will run from the server or from the client.
 
 Example:
 ```js
-if (process.BROWSER) {
 import Vue from 'vue'
-  import VeeValidate from 'vee-validate'
+import VueNotifications from 'vue-notifications'
 
-  Vue.use(VeeValidate)
+if (process.BROWSER) {
+  Vue.use(VueNotifications)
 }
 ```
 

examples/plugins-vendor/nuxt.config.js

@@ -1,6 +1,6 @@
 const { join } = require('path')
 
 module.exports = {
-  vendor: ['axios', 'vee-validate'],
-  plugins: [ join(__dirname, './plugins/vee-validate.js') ]
+  vendor: ['axios', 'mini-toastr', 'vue-notifications'],
+  plugins: [ join(__dirname, './plugins/vue-notifications.js') ]
 }

examples/plugins-vendor/package.json

@@ -2,8 +2,10 @@
   "name": "shared-code",
   "description": "",
   "dependencies": {
+    "axios": "^0.15.2",
+    "mini-toastr": "^0.3.10",
     "nuxt": "latest",
-    "vee-validate": "next"
+    "vue-notifications": "^0.7.0"
   },
   "scripts": {
     "start": "nuxt"

examples/plugins-vendor/pages/index.vue

@@ -1,13 +1,28 @@
 <template>
   <div>
+    <p><button @click="showLoginError">Notif me!</button></p>
     <p>Home - <router-link to="/about">About</router-link></p>
-    <p>
-      <input v-validate data-rules="required|email" type="text" name="email">
-      <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
-    </p>
   </div>
 </template>
 
 <script>
-export default {}
+let miniToastr
+if (process.BROWSER) {
+  miniToastr = require('mini-toastr')
+}
+
+export default {
+  mounted () {
+    if (process.BROWSER) {
+      miniToastr.init()
+    }
+  },
+  notifications: {
+    showLoginError: {
+      title: 'Welcome!',
+      message: 'Hello from nuxt.js',
+      type: 'info'
+    }
+  }
+}
 </script>

examples/plugins-vendor/plugins/vee-validate.js

@@ -1,5 +0,0 @@
-// This code will be injected before initializing the root App
-import Vue from 'vue'
-import VeeValidate from 'vee-validate'
-
-Vue.use(VeeValidate)

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

@@ -0,0 +1,26 @@
+// This code will be injected before initializing the root App
+import Vue from 'vue'
+import VueNotifications from 'vue-notifications'
+
+if (process.BROWSER) {
+  // 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-specifyed 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)
+}