From d47775ebfdb17b6e69707ffdfe5bb1a34006c1c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 03:39:57 +0100 Subject: [PATCH] Update plugins-vendor example (now working) --- examples/plugins-vendor/README.md | 24 ++++++++--------- examples/plugins-vendor/nuxt.config.js | 4 +-- examples/plugins-vendor/package.json | 4 ++- examples/plugins-vendor/pages/index.vue | 25 ++++++++++++++---- .../plugins-vendor/plugins/vee-validate.js | 5 ---- .../plugins/vue-notifications.js | 26 +++++++++++++++++++ 6 files changed, 63 insertions(+), 25 deletions(-) delete mode 100644 examples/plugins-vendor/plugins/vee-validate.js create mode 100644 examples/plugins-vendor/plugins/vue-notifications.js diff --git a/examples/plugins-vendor/README.md b/examples/plugins-vendor/README.md index 74acb9cbde..7ae87dd476 100644 --- a/examples/plugins-vendor/README.md +++ b/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 Vue from 'vue' +import VueNotifications from 'vue-notifications' - Vue.use(VeeValidate) +if (process.BROWSER) { + Vue.use(VueNotifications) } ``` diff --git a/examples/plugins-vendor/nuxt.config.js b/examples/plugins-vendor/nuxt.config.js index 4435a56a69..f7cbe9b2ad 100644 --- a/examples/plugins-vendor/nuxt.config.js +++ b/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') ] } diff --git a/examples/plugins-vendor/package.json b/examples/plugins-vendor/package.json index 95d1fcc1b4..7b6278e1bb 100644 --- a/examples/plugins-vendor/package.json +++ b/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" diff --git a/examples/plugins-vendor/pages/index.vue b/examples/plugins-vendor/pages/index.vue index 7a6ab5c260..76a98cb73a 100644 --- a/examples/plugins-vendor/pages/index.vue +++ b/examples/plugins-vendor/pages/index.vue @@ -1,13 +1,28 @@ diff --git a/examples/plugins-vendor/plugins/vee-validate.js b/examples/plugins-vendor/plugins/vee-validate.js deleted file mode 100644 index ef43e04444..0000000000 --- a/examples/plugins-vendor/plugins/vee-validate.js +++ /dev/null @@ -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) diff --git a/examples/plugins-vendor/plugins/vue-notifications.js b/examples/plugins-vendor/plugins/vue-notifications.js new file mode 100644 index 0000000000..93a21f1e60 --- /dev/null +++ b/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) +}