\n\nBrowser: `Google Chrome Version 134.0.6998.89 (Official Build) (arm64)`\n\nAlso reproduced on `Safari Version 18.3.1 (20620.2.4.11.6)`\n\n### Description\n\nUser may want to copy the text in the query input of a `select-menu` component by moving cursor around text, now it's unable to do it without a keyboard (`Shift + left/right arrow` or `Cmd/Ctrl + A` to select all).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2867,2870],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"triage","ffffff",3583,"nuxt","ui","open","Accessibility: unable to select text in the query input of a select-menu","2025-03-17T00:34:07Z","https://github.com/nuxt/ui/issues/3583",0.71934175,{"description":2882,"labels":2883,"number":2886,"owner":2874,"repository":2887,"state":2888,"title":2889,"updated_at":2890,"url":2891,"score":2892},"\n",[2884],{"name":2868,"color":2885},"ff281a",567,"nuxt.com","closed","[Docs] Framework v3 asset error on load","2023-02-15T12:30:49Z","https://github.com/nuxt/nuxt.com/issues/567",0.7217277,{"description":2894,"labels":2895,"number":2886,"owner":2874,"repository":2899,"state":2888,"title":2900,"updated_at":2901,"url":2902,"score":2892},"Hello, I'm having a hard time understanding and finding information on how to mock useFetch/useAsyncData returned data. \r\nI've tried using the following as well as an MSW server included in `vitest.setup.ts` but with no success:\r\n\r\nHere's an example component `pages/test.vue`:\r\n```\r\n\u003Cscript setup>\r\nconst { data: users } = useFetch('https://jsonplaceholder.typicode.com/users');\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cul>\r\n \u003Cli v-for=\"user in users\" :key=\"user.id\">\r\n \u003Cp>{{ user.id }}\u003C/p>\r\n \u003Cp>{{ user.name }}\u003C/p>\r\n \u003C/li>\r\n \u003C/ul>\r\n\u003C/template>\r\n```\r\n`pages/__tests__/Test.spec.ts`:\r\n```\r\n// @vitest-environment nuxt\r\nimport { describe, expect, it } from 'vitest';\r\nimport { mount } from '@vue/test-utils';\r\nimport { mockNuxtImport } from 'nuxt-vitest/utils';\r\nimport Test from '../test.vue';\r\n\r\nmockNuxtImport('useFetch', () => {\r\n return () =>\r\n vi.fn(() => {\r\n return {\r\n error: undefined,\r\n data: [\r\n {\r\n id: 1,\r\n name: 'John Doe',\r\n },\r\n ],\r\n pending: false,\r\n refresh: vi.fn(),\r\n };\r\n });\r\n});\r\n\r\nvi.stubGlobal('useFetch', () => {\r\n return () =>\r\n vi.fn(() => {\r\n return {\r\n error: undefined,\r\n data: [\r\n {\r\n id: 1,\r\n name: 'John Doe',\r\n },\r\n ],\r\n pending: false,\r\n refresh: vi.fn(),\r\n };\r\n });\r\n});\r\n\r\ndescribe('Test', () => {\r\n const wrapper = mount(Test);\r\n\r\n it('should render correctly', () => {\r\n expect(wrapper.html()).toMatchSnapshot();\r\n });\r\n});\r\n```\r\nIn the snapshot I can see that no data was fetched and nothing changes no matter which above mentioned method I try to mock the data with.\r\n`pages/__tests__/__snapshots__/Test.spec.ts.snap`\r\n```\r\n// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\r\n\r\nexports[`Test > should render correctly 1`] = `\"\u003Cul>\u003C/ul>\"`;\r\n```\r\n`vitest.config.ts`\r\n```\r\nimport { defineVitestConfig } from 'nuxt-vitest/config';\r\n\r\nexport default defineVitestConfig({\r\n test: {\r\n environment: 'happy-dom',\r\n setupFiles: ['./vitest.setup.ts'],\r\n },\r\n});\r\n```\r\n`vitest.setup.ts`\r\n```\r\nimport { rest } from 'msw';\r\nimport { setupServer } from 'msw/node';\r\n\r\nconst users = [\r\n {\r\n id: 1,\r\n name: 'John Doe',\r\n },\r\n];\r\n\r\nexport const restHandlers = [\r\n rest.get('https://jsonplaceholder.typicode.com/users', (req, res, ctx) => {\r\n return res(ctx.status(200), ctx.json(users));\r\n }),\r\n];\r\n\r\nconst server = setupServer(...restHandlers);\r\n\r\n// Start server before all tests\r\nbeforeAll(() => server.listen({ onUnhandledRequest: 'error' }));\r\n\r\n// Close server after all tests\r\nafterAll(() => server.close());\r\n\r\n// Reset handlers after each test `important for test isolation`\r\nafterEach(() => server.resetHandlers());\r\n```",[2896],{"name":2897,"color":2898},"vitest-environment","b60205","test-utils","API data mocking","2023-12-02T00:32:12Z","https://github.com/nuxt/test-utils/issues/567",{"description":2904,"labels":2905,"number":2909,"owner":2874,"repository":2874,"state":2888,"title":2910,"updated_at":2911,"url":2912,"score":2913},"https://nuxt.com/docs/guide/directory-structure/middleware#format\r\n\r\n\r\n\r\n\r\n\r\n",[2906],{"name":2907,"color":2908},"3.x","29bc7f",15632,"bug: docs `{` ","2023-01-19T18:19:54Z","https://github.com/nuxt/nuxt/issues/15632",0.7244288,{"description":2915,"labels":2916,"number":2920,"owner":2874,"repository":2874,"state":2888,"title":2921,"updated_at":2922,"url":2923,"score":2924},"Hello.\r\n\r\nI try to update/reload function (after click and land on page trough `\u003Cnuxt-link>`), who make pretty background image (I'm using my own npm package: https://www.npmjs.com/package/goodbackground.js) for container with `data-background-image` attribute.\r\n\r\nOn my `nuxt.config.js`:\r\n\r\n```javascript\r\n...\r\nbuild: {\r\n vendor: [\r\n 'goodbackground.js'\r\n ]\r\n},\r\n...\r\n```\r\n\r\nI use `beforeCreate` instance into this `index.vue` file:\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Csection data-background-image=\"/images/projects/background.jpg\">\r\n Hello World!\r\n \u003C/section>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n require('goodbackground.js');\r\n\r\n export default {\r\n head () {...},\r\n beforeCreate () {\r\n new GoodBackground().make();\r\n }\r\n }\r\n\u003C/script>\r\n```\r\n\r\nBut Nuxt.js show me red error page with message:\r\n\r\n```bash\r\nReferenceError: document is not defined\r\n at t.value (node_modules/goodbackground.js/goodbackground.min.js:1:1392)\r\n at Object.\u003Canonymous> (node_modules/goodbackground.js/goodbackground.min.js:1:2432)\r\n at e (node_modules/goodbackground.js/goodbackground.min.js:1:163)\r\n at node_modules/goodbackground.js/goodbackground.min.js:1:546\r\n at Object.\u003Canonymous> (node_modules/goodbackground.js/goodbackground.min.js:1:555)\r\n at Module._compile (module.js:556:32)\r\n at Object.Module._extensions..js (module.js:565:10)\r\n at Module.load (module.js:473:32)\r\n at tryModuleLoad (module.js:432:12)\r\n at Function.Module._load (module.js:424:3)\r\n```\r\n\r\nThis is simple code of my package: https://github.com/koddr/goodbackground.js/blob/master/src/goodbackground.js\r\n\r\nWhats wrong? I don't see this if I reload page (cmd+R).. How to fix it?\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/c119\">#c119\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2917],{"name":2918,"color":2919},"2.x","d4c5f9",144,"ReferenceError: document is not defined after load route from client browser","2023-01-18T15:38:30Z","https://github.com/nuxt/nuxt/issues/144",0.7269189,{"description":2926,"labels":2927,"number":2932,"owner":2874,"repository":2874,"state":2888,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Environment\n\nhttps://nuxt.com/docs/getting-started/installation\r\n\n\n### Reproduction\n\n\u003Cimg width=\"1305\" alt=\"Xnip2024-04-23_10-18-12\" src=\"https://github.com/nuxt/nuxt/assets/20498067/d6a8a7d3-dc94-4592-a26e-b78ed06ecf4b\">\r\n\n\n### Describe the bug\n\n![Uploading Xnip2024-04-23_10-18-12.png…]()\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2928,2929],{"name":2907,"color":2908},{"name":2930,"color":2931},"pending triage","E99695",26896,"The document occurs error","2024-04-23T11:26:53Z","https://github.com/nuxt/nuxt/issues/26896",0.7273917,{"description":2938,"labels":2939,"number":2941,"owner":2874,"repository":2875,"state":2888,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: modules\r\n- Runtime Modules: @nuxt/ui@2.18.3\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Version\r\n\r\n2.18.1\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-snm3l2?file=app.config.ts\r\n\r\n### Description\r\n\r\nIf using {color} in app.config.ts variants (https://ui.nuxt.com/getting-started/theming#smart-safelisting), even with \"primary\", the generated classes are ignored by tailwind. See reproduction (hover classes)\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2940],{"name":2868,"color":2869},2007,"Issue with using {color} in app.config.ts variants","2025-03-28T17:31:38Z","https://github.com/nuxt/ui/issues/2007",0.72951806,{"description":2947,"labels":2948,"number":2951,"owner":2874,"repository":2874,"state":2888,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Environment\n\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.13.2`\r\n- Nuxt Version: `3.3.2`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `npm@9.4.0`\r\n- Builder: `vite`\r\n- User Config: `target`, `ssr`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://github.com/Freegle/cloudflare-problem.git\n\n### Describe the bug\n\nAlthough the `at-ta` component is defined as async, and inside `client-only`, it seems to cause a problem when deploying to Cloudflare. The app which prompted this bug report deploys ok on Azure Functions, and Netlify.\r\n\r\nDebugging locally using `npx wrangler` shows that it's the use of `document`:\r\n\r\n```\r\n[mf:err] C:\\Users\\edwar\\AppData\\Local\\Temp\\tmp-26516-Bs6QXjFs1SZM\\index.js:9516\r\n var t4, n4, r4 = document.querySelector(\"style[\" + u2 + '~=\"' + e4.id + '\"]');\r\n ^\r\n\r\nReferenceError: document is not defined\r\n at addStyle (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:489:22)\r\n at addStylesToDom (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:473:20)\r\n at addStylesClient (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:427:3)\r\n at Object.moduleId [as 45] (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:325:56)\r\n at __webpack_require__ (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:616:32)\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:863:42\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:1582:2\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:1585:11\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:1:10\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\.nuxt\\dist\\server\\_nuxt\\error-500-9dc7725c.js:63:72\r\n\r\nC:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:489\r\n var styleElement = document.querySelector('style[' + ssrIdKey + '~=\"' + obj.id + '\"]')\r\n ^\r\nC:\\Users\\edwar\\AppData\\Local\\Temp\\tmp-26516-Bs6QXjFs1SZM\\index.js:9516\r\n var t4, n4, r4 = document.querySelector(\"style[\" + u2 + '~=\"' + e4.id + '\"]');\r\n ^\r\n\r\nReferenceError: document is not defined\r\n at addStyle (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:489:22)\r\n at addStylesToDom (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:473:20)\r\n at addStylesClient (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:427:3)\r\n at Object.moduleId [as 45] (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:325:56)\r\n at __webpack_require__ (C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:616:32)\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:863:42\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:1582:2\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:1585:11\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\node_modules\\vue-at\\dist\\vue-at-textarea.js:1:10\r\n at C:\\Users\\edwar\\AppData\\PhpstormProjects\\cloudflare-problem\\.output\\server\\C:\\Users\\edwar\\PhpstormProjects\\cloudflare-problem\\.nuxt\\dist\\server\\_nuxt\\error-500-9dc7725c.js:63:72\r\n\r\n```\r\n\r\nOn Cloudflare itself, the build works but deploy fails.\r\n\r\n```\r\n17:06:02.057 | Success: Assets published!\r\n17:06:03.126 | Error: Failed to publish your Function. Got error: Uncaught ReferenceError: document is not defined at bundledWorker-0.7070712167867925.mjs:9583:24 in addStyle at bundledWorker-0.7070712167867925.mjs:9573:21 in addStylesToDom at bundledWorker-0.7070712167867925.mjs:9545:14 in addStylesClient at bundledWorker-0.7070712167867925.mjs:9527:145 in 45 at bundledWorker-0.7070712167867925.mjs:9633:18 in __webpack_require__ at bundledWorker-0.7070712167867925.mjs:9694:5 at bundledWorker-0.7070712167867925.mjs:9949:5 at bundledWorker-0.7070712167867925.mjs:9950:3\r\n```\r\n\r\nThis works using client-side plugin. But for rarely used components I would prefer to import them when needed rather than make them globally defined. My understanding is that this should be possible using an async component.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2949,2950],{"name":2907,"color":2908},{"name":2930,"color":2931},19964,"Cloudflare and async components, client-only","2023-03-30T09:50:45Z","https://github.com/nuxt/nuxt/issues/19964",0.7296623,{"description":2957,"labels":2958,"number":2961,"owner":2874,"repository":2874,"state":2888,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Environment\r\n\r\nHey there, I am trying to deploy a Nuxt 3 site on Vercel and have been trying to fix this error for the last couple of days.\r\n\r\nNot sure if it's a bug or my inexperience with Nuxt (forgive me I am still learning), but I can't figure it out. The site works fine on my local development server, it just won't deploy.\r\n\r\nI suspect it has something to do with the plugins:\r\n— plugins/about.js\r\n— plugins/creditCard.js\r\n— plugins/message.js\r\n\r\n### Reproduction\r\n\r\nhttps://contentdotnet.vercel.app/\r\n\r\n### Describe the bug\r\n\r\nThis is the error code:\r\n\r\n500: INTERNAL_SERVER_ERROR\r\nCode: FUNCTION_INVOCATION_FAILED\r\nID: syd1::hz7dz-1681254028180-392b059c733b\r\n\r\n\r\nThis prints in terminal:\r\n\r\n```\r\n[nitro] [dev] [uncaughtException] ReferenceError: document is not defined 00:11:28\r\n at Timeout._onTimeout (/Applications/MAMP/htdocs/contentdotnet/website-1.1/plugins/about.js:6:25)\r\n at listOnTimeout (node:internal/timers:564:17)\r\n at process.processTimers (node:internal/timers:507:7)\r\n[nitro] [dev] [uncaughtException] ReferenceError: document is not defined 00:11:28\r\n at Timeout._onTimeout (/Applications/MAMP/htdocs/contentdotnet/website-1.1/plugins/message.js:14:24)\r\n at listOnTimeout (node:internal/timers:564:17)\r\n at process.processTimers (node:internal/timers:507:7)\r\n[nitro] [dev] [uncaughtException] ReferenceError: document is not defined 00:11:34\r\n at Timeout._onTimeout (/Applications/MAMP/htdocs/contentdotnet/website-1.1/plugins/creditCard.js:6:25)\r\n at listOnTimeout (node:internal/timers:564:17)\r\n at process.processTimers (node:internal/timers:507:7)\r\n```\r\n\r\n### Additional context\r\n\r\nHere is the code:\r\n\r\n```\r\n// pages/index.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv id=\"main\">\r\n \u003CPlaceholderHeader class=\"clickable\" />\r\n \u003CCreditCard />\r\n \u003CPlaceholderContent class=\"clickable\" />\r\n \u003CTheFooter />\r\n \u003C/div>\r\n \u003CAbout />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n```\r\n// components/PlaceholderHeader.vue\r\n\u003Ctemplate>\r\n \u003Cheader>\r\n \u003CNuxtLink class=\"logo\" to=\"/\">\r\n \u003Cnuxt-img src=\"/assets/img/logo-chrome.png\" alt=\"Content Dot Net\" />\r\n \u003C/NuxtLink >\r\n \u003Cdiv class=\"counter\">\r\n \u003Cdiv>0005312\u003C/div>\r\n \u003C/div>\r\n \u003C/header>\r\n\u003C/template>\r\n```\r\n\r\n```\r\n// components/About.vue\r\n\u003Ctemplate>\r\n \u003Cdiv id=\"about\" class=\"container\">\r\n \u003Cdiv v-if=\"data\">\r\n \u003Cdiv v-for=\"about in data\">\r\n \u003Ch1>{{ about.about[0].children[0].text }}\u003C/h1>\r\n \u003Ch2>\u003Cspan class=\"underline\">{{ about.about[1].children[0].text }}\u003C/span>{{ about.about[1].children[1].text }}\u003C/h2>\r\n \u003Ch3>\u003CNuxtLink href=\"mailto:info@content.net.au\">EMAIL...\u003C/NuxtLink> \u003CNuxtLink to=\"https://instagram.com/content.net.au\">INSTAGRAM...\u003C/NuxtLink> \u003CNuxtLink to=\"https://contentnetau.bandcamp.com/\">BANDCAMP...\u003C/NuxtLink>\u003C/h3>\r\n \u003Cp>{{ about.about[3].children[0].text }}\u003C/p>\r\n \u003Cp>{{ about.about[4].children[0].text }}\u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n // sanity\r\n const query = groq`*[_type == 'about'] {\r\n about[]{\r\n _key,\r\n _type,\r\n children[]{\r\n _key,\r\n _type,\r\n text\r\n }\r\n }}`;\r\n const { data } = useSanityQuery(query);\r\n\u003C/script>\r\n```\r\n\r\n```\r\n// components/CreditCard.vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"container\">\r\n \u003Cdiv id=\"credit-card\">\u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n```\r\n//components/TheFooter.vue\r\n\u003Ctemplate>\r\n \u003Cfooter>\r\n \u003Cbutton id=\"footer-btn\" class=\"logo\">\r\n \u003Cnuxt-img src=\"/assets/img/logo-c-chrome.png\" alt=\"C\" />\r\n \u003C/button >\r\n \u003Cdiv class=\"copyright\">\r\n \u003Cp>Content Dot Net © 2023\u003C/p>\r\n \u003C/div>\r\n \u003C/footer>\r\n\u003C/template>\r\n```\r\n\r\n```\r\n// plugins/about.js\r\nexport default defineNuxtPlugin(nuxtApp => {\r\n // about footer button interaction\r\n setTimeout(() => {\r\n var footerBtn = document.querySelector('#footer-btn');\r\n var about = document.querySelector('#about');\r\n var main = document.querySelector('#main');\r\n \r\n footerBtn.addEventListener('click', function() {\r\n about.classList.add('open')\r\n main.classList.add('blur')\r\n });\r\n \r\n about.addEventListener('click', function() {\r\n about.classList.remove('open')\r\n main.classList.remove('blur')\r\n });\r\n }, 100)\r\n})\r\n```\r\n\r\n```\r\n// plugins/creditCard.js\r\nexport default defineNuxtPlugin(nuxtApp => {\r\n // prompt: credit card number\r\n setTimeout(() => {\r\n const element = document.getElementById('credit-card')\r\n var creditCard = Number(prompt('Enter credit card number'))\r\n // var validation = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/\r\n\r\n if (creditCard == 0) {\r\n // document.getElementById('credit-card').innerHTML = 'Invalid'\r\n console.log('Invalid')\r\n }\r\n else if (!Number.isNaN(creditCard)) {\r\n element.innerHTML = creditCard + ' 💰'\r\n element.classList.add('valid')\r\n console.log('Credit Card Number: ' + creditCard)\r\n\r\n element.addEventListener('click', function() {\r\n element.classList.add('hide')\r\n })\r\n }\r\n else if (Number.isNaN(creditCard)) {\r\n element.innerHTML = 'Invalid credit card number. Try again'\r\n console.log('N/A')\r\n\r\n element.addEventListener('click', function() {\r\n element.classList.add('hide')\r\n })\r\n }\r\n }, 6000);\r\n })\r\n```\r\n\r\n```\r\n// plugins/message.js\r\nexport default defineNuxtPlugin(nuxtApp => {\r\n // alert: message\r\n setTimeout(function() {\r\n var messageIntro = 'NEW MESSAGE (1) from content.net.au: \\n\\n'\r\n var message1 = messageIntro + 'Welcome to our world! Please click the links to hear our music + watch our videos…if u do i will return the favour…also pls follow us on social media x'\r\n var message2 = messageIntro + 'Lets connect, send me an email info@content.net.au'\r\n var message3 = messageIntro + 'https://drive.google.com/drive/folders/1S3ilSaQCreXwAxNdrvYnEnQKex2NquWH?usp=share_link'\r\n\r\n var messageArray = [message1, message2, message3];\r\n var count = -1;\r\n\r\n var elements = document.getElementsByClassName('clickable');\r\n\r\n for (var i = 0, len = elements.length; i \u003C len; i++) {\r\n elements[i].addEventListener(\"click\", function() {\r\n alert(messageArray[++count % messageArray.length]);\r\n });\r\n }\r\n }, 100);\r\n })\r\n```\r\n\r\n### Logs\r\n\r\nLog via Vercel:\r\n\r\n```\r\nUncaught Exception \t{\"errorType\":\"ReferenceError\",\"errorMessage\":\"document is not defined\",\"stack\":[\"ReferenceError: document is not defined\",\" at Timeout._onTimeout (file:///var/task/chunks/app/server.mjs:875:21)\",\" at listOnTimeout (node:internal/timers:564:17)\",\" at process.processTimers (node:internal/timers:507:7)\"]}\r\nUnknown application error occurred\r\nRuntime.Unknown\r\n```\r\n",[2959,2960],{"name":2907,"color":2908},{"name":2930,"color":2931},20220,"Serverless Function Invocation Failed at Timeout when deploying Nuxt 3 site on Vercel","2023-04-13T03:07:22Z","https://github.com/nuxt/nuxt/issues/20220",0.73240924,{"labels":2967,"number":2970,"owner":2874,"repository":2874,"state":2888,"title":2971,"updated_at":2972,"url":2973,"score":2974},[2968,2969],{"name":2907,"color":2908},{"name":2868,"color":2869},12767,"document.querySelector(...).forEach is not a function","2023-01-19T16:21:24Z","https://github.com/nuxt/nuxt/issues/12767",0.73429245,["Reactive",2976],{},["Set"],["ShallowReactive",2979],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$foxINtR9T4lDGUNcPfHbxbNPhPEC3e4ZxMLhzAlTKPkY":-1},"/nuxt/nuxt.com/110"]