[{"data":1,"prerenderedAt":314},["ShallowReactive",2],{"blog-article-/blog/nuxt-add-vue-plugins":3,"blog-surround-/blog/nuxt-add-vue-plugins":305},{"id":4,"title":5,"body":6,"canonical":290,"date":291,"description":292,"extension":293,"featured":294,"image":295,"meta":296,"navigation":104,"ogImage":290,"path":298,"provider":299,"published":294,"seo":300,"stem":301,"tags":302,"url":290,"__hash__":304},"blog/blog/nuxt-add-vue-plugins.md","Adding Vue Plugins to your Nuxt APP",{"type":7,"value":8,"toc":281},"minimark",[9,21,26,29,55,59,62,118,122,129,148,152,165,182,186,189,218,225,233,237,250,254,277],[10,11,12,13,20],"p",{},"Let's use the ",[14,15,19],"a",{"href":16,"rel":17},"https://github.com/Akryum/v-tooltip",[18],"nofollow","Vue Tooltip plugin"," and add it to our Nuxt app so we can have amazing tooltips.",[22,23,25],"h2",{"id":24},"install-the-npm-package","Install the npm package",[10,27,28],{},"For this example i am using the latest version of the library. We can install it either using npm or yarn.",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-bash shiki shiki-themes github-light github-dark","yarn add v-tooltip@v2.1.2\n","bash","",[37,38,39],"code",{"__ignoreMap":35},[40,41,44,48,52],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sScJk","yarn",[40,49,51],{"class":50},"sZZnC"," add",[40,53,54],{"class":50}," v-tooltip@v2.1.2\n",[22,56,58],{"id":57},"create-a-nuxt-plugin","Create a Nuxt plugin",[10,60,61],{},"In order to use Vue plugins we need to create a Nuxt plugin and we do this by creating a .js file in the /plugins folder. We then paste in the code that we need to use the plugin. We import Vue and VTooltip and then tell Vue to use the VTooltip.",[30,63,68],{"className":64,"code":65,"filename":66,"language":67,"meta":35,"style":35},"language-js shiki shiki-themes github-light github-dark","import Vue from 'vue'\nimport VTooltip from 'v-tooltip'\n\nVue.use(VTooltip)\n","plugins/v-tooltip.js","js",[37,69,70,86,99,106],{"__ignoreMap":35},[40,71,72,76,80,83],{"class":42,"line":43},[40,73,75],{"class":74},"szBVR","import",[40,77,79],{"class":78},"sVt8B"," Vue ",[40,81,82],{"class":74},"from",[40,84,85],{"class":50}," 'vue'\n",[40,87,89,91,94,96],{"class":42,"line":88},2,[40,90,75],{"class":74},[40,92,93],{"class":78}," VTooltip ",[40,95,82],{"class":74},[40,97,98],{"class":50}," 'v-tooltip'\n",[40,100,102],{"class":42,"line":101},3,[40,103,105],{"emptyLinePlaceholder":104},true,"\n",[40,107,109,112,115],{"class":42,"line":108},4,[40,110,111],{"class":78},"Vue.",[40,113,114],{"class":46},"use",[40,116,117],{"class":78},"(VTooltip)\n",[22,119,121],{"id":120},"register-the-plugin","Register the plugin",[10,123,124,125,128],{},"Nuxt doesn't automatically register plugins therefore we need to tell Nuxt that the plugin exists. We do this by adding it to the plugins array in our ",[37,126,127],{},"nuxt.config.js"," file.",[30,130,132],{"className":64,"code":131,"filename":127,"language":67,"meta":35,"style":35},"plugins: ['~/plugins/v-tooltip.js']\n",[37,133,134],{"__ignoreMap":35},[40,135,136,139,142,145],{"class":42,"line":43},[40,137,138],{"class":46},"plugins",[40,140,141],{"class":78},": [",[40,143,144],{"class":50},"'~/plugins/v-tooltip.js'",[40,146,147],{"class":78},"]\n",[22,149,151],{"id":150},"lets-add-some-styles","Let's add some styles",[10,153,154,155,160,161,164],{},"You can add styles how you wish but the plugin gives us some ",[14,156,159],{"href":157,"rel":158},"https://floating-vue.starpad.dev/legacy/v2/#css",[18],"styles that we can copy"," directly and add to a ",[37,162,163],{},".css"," file which we can put in the assets folder. Then we just have to register the css file by adding it to our Nuxt config.",[30,166,168],{"className":64,"code":167,"filename":127,"language":67,"meta":35,"style":35},"css: ['~/assets/v-tooltip.css']\n",[37,169,170],{"__ignoreMap":35},[40,171,172,175,177,180],{"class":42,"line":43},[40,173,174],{"class":46},"css",[40,176,141],{"class":78},[40,178,179],{"class":50},"'~/assets/v-tooltip.css'",[40,181,147],{"class":78},[22,183,185],{"id":184},"use-the-plugin","Use the Plugin",[10,187,188],{},"We can now use the plugin in any of our layouts, pages or components by using the tooltip directive. If we add it to the logo then every time someone hovers over our Logo they will get the tooltip with a message saying 'Nuxt is Awesome'",[30,190,195],{"className":191,"code":192,"filename":193,"language":194,"meta":35,"style":35},"language-html shiki shiki-themes github-light github-dark","\u003CLogo v-tooltip=\"Nuxt is Awesome\" />\n","pages/index.vue","html",[37,196,197],{"__ignoreMap":35},[40,198,199,202,206,209,212,215],{"class":42,"line":43},[40,200,201],{"class":78},"\u003C",[40,203,205],{"class":204},"s7hpK","Logo",[40,207,208],{"class":46}," v-tooltip",[40,210,211],{"class":78},"=",[40,213,214],{"class":50},"\"Nuxt is Awesome\"",[40,216,217],{"class":78}," />\n",[10,219,220],{},[221,222],"img",{"alt":223,"src":224},"Vue plugin in use","https://res.cloudinary.com/debsobrien/image/upload/c_scale,fl_lossy,f_auto,q_auto,w_1200/v1612282619/debbie.codes/blog/vue-plugins_ubadyf.png",[10,226,227,228,232],{},"And that's it. The library itself allows you to do lots of cool things including dynamic messages, add components inside and so much more. Do check out the plugins docs and play around with the ",[14,229,231],{"href":230},"(https://github.com/Akryum/v-tooltip)","library",".",[22,234,236],{"id":235},"adding-client-side-plugins","Adding Client Side Plugins",[10,238,239,240,243,244,249],{},"if you do use a library that needs access to browser elements such as window or document then you will need to register the plugin only on the client side. This can be done by adding ",[37,241,242],{},".client.js"," as the file extension to your plugin. This tells Nuxt to not render this plugin on the Server but only on the Client, in the Browser. See the ",[14,245,248],{"href":246,"rel":247},"https://nuxtjs.org/docs/2.x/directory-structure/plugins#vue-plugins",[18],"Nuxt docs"," for more details.",[22,251,253],{"id":252},"useful-links","Useful Links",[255,256,257,264,270],"ul",{},[258,259,260],"li",{},[14,261,263],{"href":16,"rel":262},[18],"Vue Tooltip Plugin",[258,265,266],{},[14,267,269],{"href":246,"rel":268},[18],"Nuxt Vue Plugin Docs",[258,271,272],{},[14,273,276],{"href":274,"rel":275},"https://nuxtjs.org/examples/plugins-vue",[18],"Nuxt Vue Plugin Example",[278,279,280],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":35,"searchDepth":88,"depth":88,"links":282},[283,284,285,286,287,288,289],{"id":24,"depth":88,"text":25},{"id":57,"depth":88,"text":58},{"id":120,"depth":88,"text":121},{"id":150,"depth":88,"text":151},{"id":184,"depth":88,"text":185},{"id":235,"depth":88,"text":236},{"id":252,"depth":88,"text":253},null,"2021-02-02","In Nuxt we can add Vue plugins to our application by creating a Nuxt plugin and then registering that plugin in the Nuxt Config file.","md",false,"c_scale,fl_lossy,f_auto,q_auto/v1612282619/debbie.codes/blog/vue-plugins_ubadyf",{"video":297},"gAqcW51NwTE","/blog/nuxt-add-vue-plugins","cloudinary",{"title":5,"description":292},"blog/nuxt-add-vue-plugins",[303],"nuxt","o4SQcQSa6cXsZxmrw1HG1D6XrIvGtBvoKWy7v7bjPSM",[306,310],{"title":307,"path":308,"stem":309,"children":-1},"How Progressive Web Apps work","/blog/progressive-web-apps","blog/progressive-web-apps",{"title":311,"path":312,"stem":313,"children":-1},"Creating Video Courses","/blog/creating-video-courses","blog/creating-video-courses",1790839748050]