diff --git a/content/en/guides/directory-structure/plugins.md b/content/en/guides/directory-structure/plugins.md index 1697dece33..881af8d143 100644 --- a/content/en/guides/directory-structure/plugins.md +++ b/content/en/guides/directory-structure/plugins.md @@ -7,7 +7,7 @@ csb_link_plugins_client: https://codesandbox.io/embed/github/nuxt-academy/guides csb_link_plugins_external: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_external?fontsize=14&hidenavigation=1&theme=dark csb_link_plugins_custom: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_custom_plugin?fontsize=14&hidenavigation=1&theme=dark csb_link_plugins_vue: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_vue?fontsize=14&hidenavigation=1&theme=dark -img: /guides/plugins.jpg +img: /guides/plugins.svg imgAlt: modules-servermiddleware-plugins-in-nuxt-js questions: - question: The `plugins` directory contains your Javascript plugins that you want to run diff --git a/static/guides/plugins.svg b/static/guides/plugins.svg new file mode 100644 index 0000000000..c0a4fca821 --- /dev/null +++ b/static/guides/plugins.svg @@ -0,0 +1,3 @@ + + +
Include Nuxt plugin using plugins property
Include Nuxt plugin using plugins property
module.exports = {   
build: {
  transpile:['vue-tooltip']
 }
}
module.exports = {...
Nuxt Plugins
Nuxt Plugins
3 ways to extend functionalities of
Nuxt app using plugins
3 ways to extend functionalities of...
context refers to
Nuxt context. You can
access keys like
app, store, etc. And 
inject is a method:
inject(key, value)
context refers to...
Nuxt v2.14.1
August 2020
Nuxt v2.14.1...
External
packages or modules
External...
use external packages/modules in your Nuxt application
use external packa...
3
3
Vue plugin
Vue plugin
//plugins/vue-tooltip.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
//plugins/vue-tooltip.js...
use Vue plugins
in your
Nuxt application
use Vue plugins...
injected in
$root & context
injected in...
make functions or
values available
on client-side and server-side
make functions or...
//plugins/hello.js
export default (context, inject) =>
{
 inject('hello', msg => console.log(msg))
}
//plugins/hello.js...
$root refers
to root
Vue instance.
$root refers...
// plugins/axios.js
export default function ({ $axios, redirect }) {
  $axios.onError(error => {
    if(error.response.status === 404) {
      redirect('/sorry')
    }
  })
}
// plugins/axios.js...
access hello on:
client-side: this.$hello('mounted')
server-side:  $hello('asyncData')

access hello on:...
2
2
1
1
If plugin
exports ES6
module,use
transpile build   option!
If plugin...
type: array
type: array
Only in client-side 
Only in client-side 
Only in server-side
Only in server-side
Both client & server 
Both client & serve...

// nuxt.config.js
export default {
 plugins: [
    {src:'~/plugins/vue-tooltip.js', mode:'client'},
    {src:'~/plugins/bar.js', mode:'server'},
    {src:'~/plugins/axios.js'}
 ]
}

// nuxt.config.js...
Array of objects
Array of obj...

// nuxt.config.js
export default {
 plugins: [
    '~/plugins/vue-tooltip.client.js',
    '~/plugins/bar.server.js',    
    '~/plugins/axios.js'
 ]
}

// nuxt.config.js...
Array of strings
Array of str...Viewer does not support full SVG 1.1 \ No newline at end of file diff --git a/static/raw/plugins.drawio b/static/raw/plugins.drawio new file mode 100644 index 0000000000..cfb465f476 --- /dev/null +++ b/static/raw/plugins.drawio @@ -0,0 +1 @@ +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 \ No newline at end of file