`","2023-01-19T17:37:54Z","https://github.com/nuxt/nuxt/issues/14613",0.74461013,{"description":3051,"labels":3052,"number":3062,"owner":3021,"repository":3021,"state":3023,"title":3063,"updated_at":3064,"url":3065,"score":3066},"### Version\n\n[v2.3.4](https://github.com/nuxt.js/releases/tag/v2.3.4)\n\n### Reproduction link\n\n[https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed](https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed)\n\n### Steps to reproduce\n\nI configured my custom loading component as described in documentation:\n```json\n /*\n ** Customize the progress-bar color\n */\n loading: '@/components/Loading.vue',\n```\nand created my new component\n```\n\u003Ctemplate>\n \u003Cdiv v-if=\"loading\" class=\"loading-page\">\n Loading..\n \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n data: () => ({\n loading: false\n }),\n methods: {\n start() {\n this.loading = true\n },\n finish() {\n this.loading = false\n }\n }\n}\n\u003C/script>\n\n\u003Cstyle scoped>\n.loading-page {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 9999;\n background-color: red;\n}\n\u003C/style>\n```\n\n### What is expected ?\n\nMy custom loading component showed during page load.\n\n### What is actually happening?\n\nNothing, my custom component and even the default one are never showed up.\n\n### Additional comments?\n\nRelated issued closed but not solved:\n#1454\n#1463\n\nI notice that even the example provided in the documentation is not working, I just notice a little flicker caused by browser load.\n\nI try to modify the template like this:\n```\n\u003Ctemplate>\n \u003Cdiv v-if=\"true\" class=\"loading-page\">\n Loading..\n \u003C/div>\n\u003C/template>\n```\nand I correctly see the component, so the component have the correct dimension/position/z-index.\n\nI try to add some console log output:\n```\nexport default {\n data: () => ({\n loading: false\n }),\n methods: {\n start() {\n console.log('loading..')\n this.loading = true\n },\n finish() {\n console.log('loaded!')\n this.loading = false\n }\n }\n}\n```\nand I never see that output inside the console, so those methods are never called.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\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/c8458\">#c8458\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3053,3056,3059],{"name":3054,"color":3055},"stale","ffffff",{"name":3057,"color":3058},"pending triage","E99695",{"name":3060,"color":3061},"2.x","d4c5f9",4751,"Why the Custom Loading Component may not work?","2023-01-22T15:30:09Z","https://github.com/nuxt/nuxt/issues/4751",0.7499402,{"description":3068,"labels":3069,"number":3071,"owner":3021,"repository":3021,"state":3023,"title":3072,"updated_at":3073,"url":3074,"score":3075},"I am not sure if it explicitly the purpose of the project to provide components that are either always client-side rendered or both server and client-side (universal); however, is it possible to render components or pages completely on the server and avoid client-side hydration?\r\n\r\nThe main use case is that I want to tap into a REST API to generate the data that will shape the components. The issue that I am running into is that I am running into CORS issues on the client side and I believe that I am possibly exposing credentials into the front end. \r\n\r\nThe REST API that I am using relies on credentials and I would prefer if I can manage this completely with the middleware and Vue stores; however, if I try to go this route and try to make the components only grab the data if the context is on the server, I get console errors reporting that there are differences between the client and server rendered components.\r\n\r\nIf the ability to render the components only on the server side was possible, I think Nuxt would be an even more better platform. I think it would be a killer use case in that you can have single file components with the light use of javascript as needed. I could also avoid DOM interactions completely.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\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/c7344\">#c7344\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3070],{"name":3060,"color":3061},3509,"Is it possible to have components/pages that are rendered on the server ONLY","2023-01-18T16:24:10Z","https://github.com/nuxt/nuxt/issues/3509",0.75244373,{"description":3077,"labels":3078,"number":3080,"owner":3021,"repository":3021,"state":3023,"title":3081,"updated_at":3082,"url":3083,"score":3084},"I have found a weird problem on a clean install. I have a toolbar component and i am trying to import it in the layout file. The component is not rendering but if i try to import it in a page it renders normal. It has nothing special this component and i have tried it in another clean installation 3 days ago and it was working. Was there any changes in these days. Can't we import custom components to layout and use them all over the app?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2127\">#c2127\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3079],{"name":3060,"color":3061},2452,"Components in layout are not rendered","2023-01-18T15:55:18Z","https://github.com/nuxt/nuxt/issues/2452",0.75395745,{"description":3086,"labels":3087,"number":3089,"owner":3021,"repository":3021,"state":3023,"title":3090,"updated_at":3091,"url":3092,"score":3093},"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>",[3088],{"name":3060,"color":3061},2868,"global components non rendered properly on production build?","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2868",0.75505227,{"description":3095,"labels":3096,"number":3099,"owner":3021,"repository":3021,"state":3023,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### Describe the feature\n\n[The very first sentence in useCookie docs](https://nuxt.com/docs/api/composables/use-cookie#:~:text=Within%20your%20pages%2C%20components%20and%20plugins%20you%20can%20use%20useCookie) says:\r\n\r\n> Within your pages, components and plugins you can use useCookie, [...]\r\n\r\nThen, a little below, there is [a box](https://nuxt.com/docs/api/composables/use-cookie#:~:text=useCookie%20only%20works%20during%20setup%20or%20Lifecycle%20Hooks.) saying:\r\n\r\n> 👉 useCookie only works during setup or Lifecycle Hooks.\r\n\r\nBecause of that, its not clear if `useCookie` can be used in plugins or not.\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3097,3098],{"name":3031,"color":3032},{"name":3034,"color":3035},23542,"useCookie documentation is self contradictory ","2024-01-31T09:46:22Z","https://github.com/nuxt/nuxt/issues/23542",0.7567223,{"description":3105,"labels":3106,"number":3109,"owner":3021,"repository":3021,"state":3023,"title":3110,"updated_at":3111,"url":3112,"score":3113},"Hello!\r\nI am using Nuxt to generate a static website.\r\n\r\nIn layouts/default.vue\r\n```\r\n\u003Ctemplate>\r\n\u003Cdiv>\r\n\t\u003CSiteHeader />\r\n\t\u003CNuxt />\r\n\t\u003CSiteFooter />\r\n\u003C/div>\r\n\u003C/template>\r\n```\r\nIn pages/home.vue\r\n```\r\n\u003Ctemplate>\r\n\u003Cdiv>\r\n\t\u003CComponentA />\r\n\t\u003CComponentB />\r\n\t\u003CComponentC />\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n\tname: 'Home',\r\n\tlayout: 'default'\r\n}\r\n\u003C/script>\r\n```\r\nThis renders perfectly in development.\r\n\r\nHowever when I export the site to production (static) and view it, I only see the header and footer. The three components on the home page flash briefly and then disappear again.\r\n\r\nStrangely, if I make the following adjustments...\r\n\r\nIn layouts/default.vue\r\n```\r\n\u003Ctemplate>\r\n\u003Cdiv>\r\n\t\u003CSiteHeader />\r\n\t\u003CComponentA />\r\n\t\u003CComponentB />\r\n\t\u003CComponentC />\r\n\t\u003CSiteFooter />\r\n\u003C/div>\r\n\u003C/template>\r\n```\r\nIn pages/home.vue\r\n```\r\n\u003Ctemplate>\r\n\u003Cdiv />\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n\tname: 'Home',\r\n\tlayout: 'default'\r\n}\r\n\u003C/script>\r\n```\r\n...and then export the site to production, everything works perfectly.\r\n\r\nSo I assume there is some kind of issue with with how things are being injected through the Nuxt component? Not sure if there is a setting somewhere I am missing?\r\n\r\nThanks (in advance) for your help!\r\n",[3107,3108],{"name":3057,"color":3058},{"name":3060,"color":3061},9198,"Components on pages disappear in production","2023-01-22T15:44:51Z","https://github.com/nuxt/nuxt/issues/9198",0.7573364,{"description":3115,"labels":3116,"number":3118,"owner":3021,"repository":3021,"state":3023,"title":3119,"updated_at":3120,"url":3121,"score":3122},"I am trying to create a faq page on nuxt js.\r\nThe template below which I got from veautify does not show up on my localhost. I get these errors instead. It works if I replace v-for \"(item,i) in 5\" : key=\"i\" as shown in the template source code but I want to pass a list of questions from object(listquestions)into the array from MapState.\r\n\r\n[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\nv-toolbar-logo> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nfound in\r\n\r\n---> \u003CDefault> at layouts/default.vue\r\n \u003CRoot>\r\n**faq.vue file**\r\n```\r\n\u003Ctemplate>\r\n \u003Cv-expansion-panel>\r\n \u003Cv-expansion-panel-content v-for=\"quest in listquestions\" :key=\"quest.id\">\r\n \u003Cdiv slot=\"header\"> Question \u003C/div>\r\n \u003Cv-card>\r\n \u003Cv-card-text class =\"grey lighten-3\">\r\n This is a test answer.\r\n \u003C/v-card-text>\r\n \u003C/v-card>\r\n \u003C/v-expansion-panel-content>\r\n \u003C/v-expansion-panel>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n\r\n\u003C/style>\r\n\u003Cscript>\r\n\r\nimport {mapState, mapGetters, mapActions} from 'vuex'\r\n\r\nexport default {\r\n computed: mapState({\r\n listquestions:'allQuestions'\r\n })\r\n}\r\n\u003C/script>`\r\n```\r\n```\r\n**questions.js file**\r\nexport const state = () => ({\r\n list :['Question 1','Question 2','Question 3','Question 4','Question 5'],\r\n allQuestions: state => state.list \r\n \r\n})\r\n``` \r\nAccordian template source code which I got from veautify.\r\n```\r\nhttps://vuetifyjs.com/components/expansion-panels#example-1\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/c2383\">#c2383\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3117],{"name":3060,"color":3061},2743,"Accordian template on veutify not showing up because of v-for loop on nuxt js ","2023-01-18T16:02:37Z","https://github.com/nuxt/nuxt/issues/2743",0.7581271,["Reactive",3124],{},["Set"],["ShallowReactive",3127],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fHUSaPy3ecP_Nwz0xGhiChxChRwuyFE1Jh2m9S75ZgbU":-1},"/nuxt/ui/4631"]