\n \u003C/UApp>\n\u003C/template>\n\nindex.vue\n\n\u003Cscript setup lang=\"ts\">\nconst toast = useToast();\n\nfunction showToast() {\n toast.add({\n title: \"Title\",\n });\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUButton\n label=\"Show toast\"\n color=\"neutral\"\n variant=\"outline\"\n @click=\"showToast\"\n />\n\u003C/template>\n\n\nAnd this is my nuxt.config.ts\n\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n hooks: {\n \"prerender:routes\"({ routes }) {\n routes.clear();\n },\n },\n future: {\n compatibilityVersion: 4,\n },\n compatibilityDate: \"2024-11-01\",\n devtools: { enabled: true },\n modules: [\"@nuxt/ui\", \"@vueuse/nuxt\", \"@nuxt/eslint\"],\n css: [\"~/assets/css/main.css\"],\n ui: {\n fonts: false,\n //colorMode: false,\n theme: {},\n },\n ssr: false,\n router: {\n options: {\n hashMode: true,\n },\n },\n eslint: {\n config: {\n stylistic: true,\n },\n },\n});\n\nI tried working with a nuxt.config.ts by default settings but it didnt work neither.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3047,3050,3051],{"name":3048,"color":3049},"bug","d73a4a",{"name":3024,"color":3025},{"name":3052,"color":3053},"triage","ffffff",3564,"Toast not showing","2025-03-18T19:06:18Z","https://github.com/nuxt/ui/issues/3564",0.73645866,{"labels":3060,"number":3067,"owner":3027,"repository":3027,"state":3029,"title":3068,"updated_at":3069,"url":3070,"score":3071},[3061,3064],{"name":3062,"color":3063},"enhancement","8DEF37",{"name":3065,"color":3066},"2.x","d4c5f9",7753,"Components into root element","2023-02-15T00:59:50Z","https://github.com/nuxt/nuxt/issues/7753",0.75180453,{"labels":3073,"number":3078,"owner":3027,"repository":3027,"state":3029,"title":3079,"updated_at":3080,"url":3081,"score":3082},[3074,3077],{"name":3075,"color":3076},"pending triage","E99695",{"name":3065,"color":3066},9566,"app/router.scrollBehavior.js does not work on Android","2023-01-22T15:44:59Z","https://github.com/nuxt/nuxt/issues/9566",0.75872046,{"description":3084,"labels":3085,"number":3089,"owner":3027,"repository":3027,"state":3029,"title":3090,"updated_at":3091,"url":3092,"score":3093},"Is there a way to mount a global component that will exists app wide regardless of layout change? \r\n\r\nUse case is a notifications component, and the issue is that the notifications disappear once the layout changes.\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/c2074\">#c2074\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3086,3088],{"name":3021,"color":3087},"cc317c",{"name":3065,"color":3066},2387,"Global component that exists app wide regardless of layout","2023-01-18T15:55:11Z","https://github.com/nuxt/nuxt/issues/2387",0.7592112,{"description":3095,"labels":3096,"number":3101,"owner":3027,"repository":3027,"state":3029,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.1\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, ssr, app, css\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-njpvcp\n\n### Describe the bug\n\nThe following is a very common application layout(also shown in layouts/default.vue in the reproduction link):\r\n```\r\n\u003CHeader />\r\n\u003Cslot /> \u003C!-- References to the page -->\r\n\u003CFooter />\r\n```\r\nWhen we use 'out-in' mode in pageTransition in nuxt.config.ts:\r\n```\r\npageTransition: { name: 'page', mode: 'out-in' }\r\n```\r\nAnd we **CLICK ON THE LINK** . This is what's rendered in the DOM.\r\n```\r\n\u003CHeader />\r\n\u003CFooter />\r\n\u003Cslot /> \u003C!-- References to the page -->\r\n```\r\nAlso when we use the following layout:\r\n```\r\n\u003CHeader />\r\n\u003Cdiv>\r\n \u003Cslot /> \u003C!-- References to the page -->\r\n \u003Cp>More Content\u003C/p>\r\n\u003C/div>\r\n\u003CFooter />\r\n```\r\nThis is the result in the DOM, after the link is clicked:\r\n```\r\n\u003CHeader />\r\n\u003Cdiv>\r\n \u003Cp>More Content\u003C/p>\r\n \u003Cslot /> \u003C!-- References to the page -->\r\n\u003C/div>\r\n\u003CFooter />\r\n```\r\nNuxt v3 it seems that append the slot at the end of the parent element. Which seems a bug to me. Looks like there needs to be a handling in appending the slot in the correct order.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3097,3100],{"name":3098,"color":3099},"3.x","29bc7f",{"name":3075,"color":3076},25739,"Slot position gets shifted when using the out-in page transition","2024-02-11T09:36:25Z","https://github.com/nuxt/nuxt/issues/25739",0.7616295,{"description":3107,"labels":3108,"number":3120,"owner":3027,"repository":3027,"state":3029,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Environment\n\nmac m1\r\n\n\n### Reproduction\n\n- [stackblitz](https://stackblitz.com/edit/nuxt-starter-8svbbt?file=nuxt.config.ts)\r\n\r\nOn the right window, there is a refresh button on the left of the URL\n\n### Describe the bug\n\n- `nuxt.config.js`\r\n\r\nIf pageTransition is set. Refreshing page scrolls will to the top\r\n\r\n```ts\r\nexport default defineNuxtConfig({\r\n app: {\r\n pageTransition: { name: 'page', mode: 'out-in' },\r\n },\r\n});\r\n```\r\n\r\nBut disable pageTransition. the scroller will be at the position before refreshing\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3109,3112,3113,3114,3117],{"name":3110,"color":3111},"good first issue","fbca04",{"name":3098,"color":3099},{"name":3048,"color":3049},{"name":3115,"color":3116},"pages","00DFB5",{"name":3118,"color":3119},"🔨 p3-minor","FBCA04",19664,"app.pageTransition Refreshing page scrolls will to the top","2024-01-29T13:56:24Z","https://github.com/nuxt/nuxt/issues/19664",0.76493174,{"description":3126,"labels":3127,"number":3129,"owner":3027,"repository":3027,"state":3029,"title":3130,"updated_at":3131,"url":3132,"score":3133},"I am getting this error 'Cannot read property 'error' of undefined' after refreshing page in browser.\r\nIt works fine if I navigate to page with nuxt-link. \r\nIt also works fine if i use $toasted in mounted function instead of created.\r\n\r\n- nuxt@1.3.0\r\n- vue@2.5.13\r\n\r\nmycomponent.vue\r\n```\r\n created() {\r\n // This does not work\r\n this.$toast.error('Error')\r\n },\r\n mounted() {\r\n // This works\r\n this.$toast.error('Error')\r\n }\r\n```\r\n\r\nnuxt.config.js\r\n```\r\nmodules: [\r\n '@nuxtjs/toast',\r\n ],\r\n toast: {\r\n position: 'bottom-right'\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/c2471\">#c2471\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3128],{"name":3065,"color":3066},2845,"$toast is available in mounted but not in created function after browser refresh","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2845",0.76556146,{"description":3135,"labels":3136,"number":3139,"owner":3027,"repository":3027,"state":3029,"title":3140,"updated_at":3141,"url":3142,"score":3143},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-zo83ve?file=app.vue\n\n### Describe the bug\n\nWhen custom page transitions are defined with the 'out-in' mode, it causes a disruption in custom layouts. The \u003Cslot> is consistently rendered at the end of the page after the initial navigation. An example illustrating this issue can be found on [Stackblitz](https://stackblitz.com/edit/nuxt-starter-zo83ve?file=app.vue). The provided example uses the default layout and is expected to display components in the following order:\r\n\r\n1️⃣ Navigation\r\n2️⃣ [slot]\r\n3️⃣ Footer\r\n\r\nHowever, after navigating to the /second page, the layout breaks, resulting in the following rendering:\r\n\r\n1️⃣ Navigation\r\n3️⃣ Footer\r\n2️⃣ [slot]\r\n\r\nThe page transition is defined inside the nuxt.config.ts.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3137,3138],{"name":3098,"color":3099},{"name":3075,"color":3076},25065,"Page transitions in 'out-in' mode disrupt layout order","2024-01-05T10:08:42Z","https://github.com/nuxt/nuxt/issues/25065",0.76568234,["Reactive",3145],{},["Set"],["ShallowReactive",3148],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRF8p8vEdVCyQkTaUQw0NEpmaQv0BJJa4acRJ1Gfa8j0":-1},"/nuxt/ui/4370"]