\r\n`\r\n\r\n\r\nError:\r\n\r\n```\r\nNuxtServerError\r\n\r\nrender function or template not defined in component: grids\r\n```\r\n\r\n\r\n### Not working ((\r\n### How fix this\r\n\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1247\">#c1247\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2891],{"name":2880,"color":2881},1405,"global component","2023-01-18T15:41:44Z","https://github.com/nuxt/nuxt/issues/1405",0.62001383,{"description":2898,"labels":2899,"number":2905,"owner":2869,"repository":2869,"state":2883,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### Version\r\n\r\n[v2.6.3](https://github.com/nuxt.js/releases/tag/v2.6.3)\r\n\r\n### Reproduction link\r\n\r\n[https://github.com/halower/nuxt-pdf-test](https://github.com/halower/nuxt-pdf-test)\r\n\r\n### Steps to reproduce\r\n\r\n#### first step: \r\n i created a vue component(name pdf.vue) use the `pdfjs-dist`\r\n#### second step: \r\n import the plugin\r\n```\r\nimport Vue from 'vue'\r\nimport Pdf from '~/components/Pdf.vue'\r\n\r\nVue.component('Pdf', Pdf)\r\n``` \r\n#### third step:\r\n\r\n```\r\n plugins: [\r\n {\r\n src: '~/plugins/pdf',\r\n ssr: false\r\n }\r\n ],\r\n\r\n```\r\n\r\n### What is expected ?\r\n\r\nthe pdf component run\r\n\r\n### What is actually happening?\r\n\r\n```\r\ncommons.app.js:9792 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\n\r\nUncaught ReferenceError: window is not defined\r\n \r\n```\r\n\r\n\r\n\r\n\u003C!--cmty-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9189\">#c9189\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2900,2903,2904],{"name":2901,"color":2902},"stale","ffffff",{"name":2866,"color":2867},{"name":2880,"color":2881},5704,"plugins setting is invalid in nuxt.config.js ","2023-01-22T15:33:07Z","https://github.com/nuxt/nuxt/issues/5704",0.62219447,{"description":2911,"labels":2912,"number":2914,"owner":2869,"repository":2869,"state":2883,"title":2915,"updated_at":2916,"url":2917,"score":2918},"Hi there!\r\n\r\nI just experiencing an issue that `global components` that defined in `plugins/` directory doesn't seems to work on production build.\r\n\r\n\r\n\r\n> left : build & run on production mode\r\n> right : run development server\r\n\r\nI've assure that this issue only happened on client side rendering because i've check the server side rendering seems to work just fine.\r\n\r\n\r\n\r\nThe global component `\u003Capp-main />` is registered on `/plugins/global-components.js` file here\r\n\r\n\r\n\r\nand here my `nuxt.config.js` file\r\n\r\n```js\r\n'use strict'\r\n\r\nconst { resolve } = require('path')\r\nconst Env = use('Env')\r\n\r\nmodule.exports = {\r\n build: {\r\n publicPath: Env.get('CDN_URL', '/'),\r\n\r\n analyze: {\r\n analyzerMode: 'static',\r\n generateStatsFile: true,\r\n statsFilename: 'webpack-stats.json'\r\n },\r\n\r\n extractCSS: true,\r\n\r\n postcss: {\r\n plugins: {\r\n 'postcss-custom-properties': false\r\n }\r\n }\r\n },\r\n\r\n css: [\r\n '~assets/scss/main.scss'\r\n ],\r\n\r\n head: {\r\n htmlAttrs: {},\r\n\r\n meta: [\r\n {\r\n charset: 'utf-8'\r\n },\r\n {\r\n name: 'viewport',\r\n content: 'width=device-width,initial-scale=1'\r\n },\r\n {\r\n 'http-equiv': 'x-ua-compatible',\r\n content: 'ie=edge,chrome=1'\r\n },\r\n {\r\n name: 'theme-color',\r\n content: '#ffffff'\r\n }\r\n ],\r\n\r\n link: [\r\n {\r\n rel: 'shortcut icon',\r\n type: 'image/x-icon',\r\n href: '/favicon.ico'\r\n },\r\n {\r\n rel: 'apple-touch-icon',\r\n size: '192x192',\r\n href: '/mobile-icon.png'\r\n },\r\n {\r\n rel: 'icon',\r\n type: 'image/png',\r\n size: '192x192',\r\n href: '/mobile-icon.png'\r\n },\r\n {\r\n rel: 'icon',\r\n type: 'image/png',\r\n size: '32x32',\r\n href: '/favicon.png'\r\n },\r\n {\r\n rel: 'stylesheet',\r\n href: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,600'\r\n }\r\n ],\r\n\r\n noscript: [{\r\n innerHtml: `\r\n \u003Ch1>Javascript Disabled\u003C/h1>\r\n \u003Cp>It appears that you do not have Javascript enabled. This application relies on Javascript for most of our features.\u003Cp>\r\n \u003Cp>Please enable Javascript and \u003Ca href=\".\">reload\u003C/a> in order to use this site.\u003C/p>\r\n `}]\r\n },\r\n\r\n loading: {\r\n color: '#589d8d'\r\n },\r\n\r\n plugins: [\r\n '~/plugins/global-components.js'\r\n ],\r\n\r\n router: {\r\n base: '/',\r\n linkActiveClass: '',\r\n linkExactActiveClass: 'is-active',\r\n\r\n scrollBehaviour: () => ({\r\n x: 0,\r\n y: 0\r\n }),\r\n\r\n extendRoutes: (routes) => {\r\n routes.forEach((route) => {\r\n route.meta = {\r\n title: route.name\r\n }\r\n })\r\n }\r\n },\r\n\r\n buildDir: resolve(__dirname, '..', 'public'),\r\n srcDir: resolve(__dirname, '..', 'resources')\r\n}\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2492\">#c2492\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2913],{"name":2880,"color":2881},2868,"global components non rendered properly on production build?","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2868",0.6279395,{"description":2920,"labels":2921,"number":2923,"owner":2869,"repository":2869,"state":2883,"title":2924,"updated_at":2925,"url":2926,"score":2927},"I'm (hopefully) going down the road of making my first nuxt.js module, something to help build global programmatic components in the nuxt.js environment.\n\nhere is an example setup w/ it being used as a plugin: \n\nhttps://github.com/acidjazz/nuxt-global-component\n\nhere is my `plugins/global-components.js` in my current project\n\n```javascript\nimport Vue from 'vue'\nimport Modal from '@/components/global/Modal'\nimport Message from '@/components/global/Message'\nVue.use(Modal, Message)\n```\nthe Message global component registers `$message` to Vue like this \n```javascript\n...\nconst Plugin = {\n install(Vue) {\n Vue.prototype['$message'] = MessageProgrammatic\n }\n}\nVue.use(Plugin)\nexport default Plugin\n```\nthis allows me to `this.$message.show(\"message\")` anywhere in my nuxt.js app\n\nthe current problem/request I'd like to hopefully figure out is how can i access `this.$message` in another plugin?\n\ni'm writing one for `axios` where i show my message component for most any errors, and i'd like to access it in my `plugins/axios.js` that currently is\n\n```javascript\nexport default ({ $axios, $message }) => {\n $axios.onError(error => {\n const code = parseInt(error.response && error.response.status)\n if (error.response.data && error.response.data.errors) {\n for (let key in error.response.data.errors) {\n for (let index in error.response.data.errors[key]) {\n $message.show({ type: 'danger', copy: error.response.data.errors[key][index]})\n }\n }\n }\n })\n}\n```\n\nbut `this.$message` is undefined, is this possible?\n\n\n\n\n\n\n\n\n\n\n\u003C!--cmty-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7623\">#c7623\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2922],{"name":2880,"color":2881},3793,"plugins accessing plugins","2023-01-18T16:26:35Z","https://github.com/nuxt/nuxt/issues/3793",0.62800795,{"description":2929,"labels":2930,"number":2932,"owner":2869,"repository":2869,"state":2883,"title":2933,"updated_at":2934,"url":2935,"score":2936},"Currently, to import a component to a page, I appear to have to import `Vue` itself, then the component (with `Vue.component`). \r\n\r\nWhere do I globally register components and why do I need to import `Vue` itself?\r\n\r\nApologies if these are silly questions.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c40\">#c40\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2931],{"name":2880,"color":2881},55,"Registering global components","2023-01-18T15:38:24Z","https://github.com/nuxt/nuxt/issues/55",0.6300635,{"description":2938,"labels":2939,"number":2944,"owner":2869,"repository":2869,"state":2883,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Environment\n\nStackblitz\r\n\r\n```\r\nWorking directory: /home/projects/github-vom1ml 10:32:25 AM\r\nNuxt project info: 10:32:25 AM\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-vom1ml?file=plugins%2Ffontawesome.ts,app.vue\n\n### Describe the bug\n\nI was following the installation guide of FontAwesome for Nuxt 3 at https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt\r\n\r\nBasically, it says that to add a global `\u003CFontAwesomeIcon>` component, you need to register it using:\r\n\r\n```js\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)\r\n})\r\n```\r\n\r\nAnd yes, the component is working and the icon does show up. But VSCode does not recognize this component, it shows `unknown`. Which means it does not have autocomplete for props, type checking etc.\r\n\r\nScreenshot:\r\n\r\n\r\nThis happens with any 3rd party component that I want to register globally using `vueApp.component(...)`. I have Volar installed and my local auto-imported components are indeed recognized. Also I see that all Nuxt components are also recognized like `\u003CNuxtLayout>` and `NuxtLoadingIndicator` etc.\r\n\r\nSo why aren't my own custom-registered 3rd party components recognized? Is it the wrong approach to use `nuxtApp.vueApp.component()`?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2940,2943],{"name":2941,"color":2942},"3.x","29bc7f",{"name":2866,"color":2867},25371,"Nuxt does not recognize globally registered components (type: unknown)","2024-01-22T17:23:26Z","https://github.com/nuxt/nuxt/issues/25371",0.63531435,{"labels":2950,"number":2956,"owner":2869,"repository":2869,"state":2883,"title":2957,"updated_at":2958,"url":2959,"score":2960},[2951,2952,2953],{"name":2941,"color":2942},{"name":2866,"color":2867},{"name":2954,"color":2955},"needs reproduction","FBCA04",13242,"Components cannot be registered by Vue plugins","2023-01-19T16:49:12Z","https://github.com/nuxt/nuxt/issues/13242",0.63954276,{"labels":2962,"number":2964,"owner":2869,"repository":2869,"state":2883,"title":2965,"updated_at":2966,"url":2967,"score":2968},[2963],{"name":2880,"color":2881},5050,"plugin not loading on first load","2023-01-18T20:10:40Z","https://github.com/nuxt/nuxt/issues/5050",0.64608085,["Reactive",2970],{},["Set"],["ShallowReactive",2973],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCFZaNBCMPkuCUsPt6wXpyYWV7TarkBgBJMwix-ttEd0":-1},"/nuxt/nuxt/4006"]