\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n mounted() {\r\n console.log(\"index\", this.$el);\r\n console.log(\"index\", this.$refs);\r\n },\r\n};\r\n\u003C/script>\r\n```\r\n\r\n2. Create a `pages/about.vue` file with the following code:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CNuxtLink to=\"/\">To Index\u003C/NuxtLink>\r\n\u003C/template>\r\n```\r\n\r\n3. Create a `components/Dummy.vue` file with the following code:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CNuxtLink to=\"/about\">To About\u003C/NuxtLink>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n mounted() {\r\n console.log(\"dummy\", this.$el);\r\n },\r\n};\r\n\u003C/script>\r\n```\r\n\r\n4. Run the project, and from the client start on the `/about` page first.\r\n5. Navigate to the `/index` page. Note in the console that in the `mounted()` lifecycle hook in `index.vue`, `this.$el` is a comment and `this.$refs` is an empty object.\r\n\r\n### What is Expected?\r\n\r\nAs far as all Vue documentation seems to indicate, by the time `mounted()` is called `this.$el` should be the DOM element at the root of the template or the Vue component at the root of the template, and `this.$refs` should be populated. In a project I'm working on, I need to access `this.$el` in the `mounted()` hook, but since it is a comment I am not able to.\r\n\r\n### What is actually happening?\r\n\r\nWhen navigating to a page on the client side, if the page is being navigated to for the **first time from the client side** and if the root element of the page being navigated to is **another component**, then `this.$el` in the **page component** is a comment instead of the other component and `this.$refs` is an empty object when accessed in the `mounted()` lifecycle hook.",[2021,2024],{"name":2022,"color":2023},"pending triage","E99695",{"name":1998,"color":1999},8981,"this.$el and this.$refs not populated in mounted() hook on first client-side page render","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8981",0.70526385,{"description":2031,"labels":2032,"number":2038,"owner":1988,"repository":1988,"state":2001,"title":2039,"updated_at":2040,"url":2041,"score":2042},"### 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/jzw6n96vj3](https://codesandbox.io/s/jzw6n96vj3)\n\n### Steps to reproduce\n\nThe sample demo just shows a very simple example of the problem. The app is in 'spa' mode.\n1. Load jquery as part of `head` in nuxt.config.js, and reference `$` in the mounted event of a page, and it works fine.\n2. Load jquery as part of `head` in pages/layouts, and reference `$` in the mounted event of a page, and you get the error: `$ is undefined`\n\nThe problem is the inconsistency of using `head` between nuxt.config and pages/layouts. Or at least the difference imo should be documented.\n\n### What is expected ?\n\n`head` should behave the same in both nuxt.config.js and pages/layouts.\nIn `spa` mode and for `nuxt generate`, I would expect that any link/script loaded from `head` would all get placed at the top of the \u003Chead> element in the html.\n\n### What is actually happening?\n\n`head` does not behave the same, depending on where you implement it. Instead, only nuxt.config.js ones do. The ones loaded from pages/layouts are dynamically loaded and get placed AFTER the code that is compiled from the *.vue files.\n\n### Additional comments?\n\nThe point of having `head` is to give developers the ability to guarantee loading of scripts and css before anything else in the app or on the page. At least that's how I interpret it. Instead, the expected behavior is only exhibited when using nuxt.config.js, and not pages/layouts as the documentation seems to suggest.\n\nI have an app that uses a variety of layouts (i.e.: frontend, backend, etc..). We don't want to have to put all the scripts for all sections of the site into nuxt.config.js. We also use the `splitChunks.layouts: true feature`, as well as `extractCSS`. We're stuck with themes with JS that aren't available in es6 and are full of IIFEs. We need to make sure the scripts in each section of the site are loaded and available before in code inside the mounted event fires.\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/c8412\">#c8412\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2033,2036,2037],{"name":2034,"color":2035},"stale","ffffff",{"name":2022,"color":2023},{"name":1998,"color":1999},4694,"Inconsistent behavior when using `head` meta property between nuxt.config.js and pages/layouts.","2023-01-22T15:30:09Z","https://github.com/nuxt/nuxt/issues/4694",0.7052767,{"description":2044,"labels":2045,"number":2050,"owner":1988,"repository":1988,"state":2001,"title":2051,"updated_at":2052,"url":2053,"score":2054},"I'm trying to get a better understanding of the lifecycle of a Nuxt app that is statically generated and could use some help.\r\n\r\nI've been running into issues where `data` attributes will not be set if I rely on `mounted` to initialize it and I'm not totally sure why.\r\n\r\nFor example, lets say I have the following setup to load data using `fetch` and `computed` properties.\r\n\r\n```\r\nasync fetch ({store, params}) {\r\n const data = await store.dispatch('fetchData', params.id)\r\n store.dispatch('setData', data)\r\n},\r\ncomputed: {\r\n data () {\r\n return this.$store.getters.loadedData\r\n }\r\n}\r\n```\r\n\r\nThis works fine, but now if I want to use a `v-model` I need to add a `data` property since computed property doesn't make sense here.\r\n\r\n```\r\ndata () {\r\n selectedId: null\r\n},\r\nmounted () {\r\n this.selectedId = this.$store.getters.loadedData.id\r\n}\r\n```\r\n\r\nWhen I do this, `this.selectedId` is not set if I do a page refresh, it will work the first time if I navigate to the page from another URL. There's something about the order of operations or timing when a page refresh occurs that doesn't run `mounted` as expected. I know it's running because I can do `console.log` and see them but the value for `this.selectedId` is not being set. I'm assuming it's because the `store` is not ready yet by this point.\r\n\r\nSo as a hack, I can wrap it with `nextTick`\r\n\r\n```\r\nmounted () {\r\n this.$nextTick(() => {\r\n this.selectedId = this.$store.getters.loadedData.id\r\n })\r\n}\r\n```\r\nAnd it works now... but this doesn't seem right.\r\n\r\nWhat's the best practice here for setting component `data` that relies on the store? I can't use the `fetch` method because the component is not accessible here.\r\n\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/c1644\">#c1644\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2046,2049],{"name":2047,"color":2048},"question","cc317c",{"name":1998,"color":1999},1830,"Help - Understanding when to use async fetch, mounted and data properties for static sites","2023-01-18T15:54:46Z","https://github.com/nuxt/nuxt/issues/1830",0.70632535,{"description":2056,"labels":2057,"number":2060,"owner":1988,"repository":1988,"state":2001,"title":2061,"updated_at":2062,"url":2063,"score":2064},"### Version\r\n\r\n[v1.4.0](https://github.com/nuxt.js/releases/tag/v1.4.0)\r\n\r\n### Reproduction link\r\n\r\n[https://github.com/vedmaque/nuxt-double-data](https://github.com/vedmaque/nuxt-double-data)\r\n\r\n### Steps to reproduce\r\n\r\n- Create `pages/parent.vue`\r\n```\r\n\u003Ctemplate>\r\n \u003Cnuxt-child />\r\n\u003C/template>\r\n```\r\n- Create `pages/parent/child1.vue`\r\n```\r\n\u003Ctemplate>\r\n \u003Cnuxt-link to=\"/parent/child2\">Go to Child 2 Page\u003C/nuxt-link>\r\n\u003C/template>\r\n```\r\n- Create `pages/parent/child2.vue`\r\n```\r\n\u003Ctemplate>\r\n \u003Cnuxt-link to=\"/parent/child1\">Go to Child 1 Page\u003C/nuxt-link>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n data () {\r\n console.log('child2.vue data')\r\n return {}\r\n },\r\n created () {\r\n console.log('child2.vue created')\r\n },\r\n mounted () {\r\n console.log('child2.vue mounted')\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n- Navigate from Child 1 to Child 2.\r\n- Log in console:\r\n```\r\nchild2.vue data\r\nchild2.vue created\r\nchild2.vue mounted\r\nchild2.vue data\r\n```\r\n\r\n### What is expected ?\r\n\r\nExpect that data() called only once and not after mounted().\r\n\r\n### What is actually happening?\r\n\r\nData() called second time after mounted().\r\n\r\n### Additional comments?\r\n\r\n- It works fine when use simple Vue app with Vue-router.\r\n- Changing parent.vue template to \r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cnuxt-child />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nfixes the issue.\r\n- I think that issue at `fixPrepatch` function at client.js:391 (not sure what happens, but)\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/c7324\">#c7324\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2058,2059],{"name":2022,"color":2023},{"name":1998,"color":1999},3496,"Data called twice when navigating from child to child route","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3496",0.71244746,{"description":2066,"labels":2067,"number":2069,"owner":1988,"repository":1988,"state":2001,"title":2070,"updated_at":2071,"url":2072,"score":2073},"\r\nThe `method` and `mounted` in the `component` under **window7 IE9**, sometimes does not execute。Not every time. When the console is opened, it is executed correctly.\r\n\r\n\r\n\r\ndemo: [https://www.jumorexfp.com/](https://www.jumorexfp.com/)\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/c2108\">#c2108\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2068],{"name":1998,"color":1999},2430,"components mounted no work in window7 IE9 ","2023-01-18T15:55:12Z","https://github.com/nuxt/nuxt/issues/2430",0.71361357,{"description":2075,"labels":2076,"number":2069,"owner":1988,"repository":2084,"state":2001,"title":2085,"updated_at":2086,"url":2087,"score":2073},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.17.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.6\n\n### Reproduction\n\nAdd UInputMenu or USelectMenu inside a USlideover\n\n### Description\n\nThe z-index value of the Slideover is bigger than the one on the portal created by UInputMenu/USelectMenu, making the options being hidden behind it and not selectable.\n\nFor now i just added:\n\n`div[data-radix-popper-content-wrapper] {\n z-index: 999 !important;\n}`\n\non `app.vue` to quick fix the problem or add `:portal=\"false\"` as a property of UInputMenu/USelectMenu.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2077,2078,2081],{"name":2010,"color":2011},{"name":2079,"color":2080},"duplicate","cfd3d7",{"name":2082,"color":2083},"v3","49DCB8","ui","UInputMenu/USelectMenu not working with USlideover due to z-index","2024-10-21T10:16:16Z","https://github.com/nuxt/ui/issues/2430",{"labels":2089,"number":2092,"owner":1988,"repository":1988,"state":2001,"title":2093,"updated_at":2094,"url":2095,"score":2096},[2090,2091],{"name":2022,"color":2023},{"name":1998,"color":1999},5797,"data function is being called after mounted when using transition in-out mode","2023-01-22T15:33:07Z","https://github.com/nuxt/nuxt/issues/5797",0.7147987,["Reactive",2098],{},["Set"],["ShallowReactive",2101],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"30iVL8pzb8nHOdjEe99Z78mCelwGQreAUEAe2y7lDYw":-1},"/nuxt/nuxt/2854"]