`\n\nit doesn't work that way\n\nI really ask for help!",[2903,2906],{"name":2904,"color":2905},"question","d876e3",{"name":2907,"color":2908},"v3","49DCB8",3098,"Table filtered, sorting fetch","2025-01-14T11:05:37Z","https://github.com/nuxt/ui/issues/3098",0.76393706,{"description":2915,"labels":2916,"number":2920,"owner":2872,"repository":2872,"state":2921,"title":2922,"updated_at":2923,"url":2924,"score":2925},"I've been trying to port my vue.js application to nuxt.js for a few days now and I've got to be honest, I've ran into a lot of problems so far. Problems that never happened when my website was a normal vue.js app.\r\n\r\nSo, right now I've ran into another problem. I'll try to explain.\r\n\r\nWhen I load my website, it loads in a `VideoPlayer` component that I've made my self, the video player works perfectly fine, when I was using it with my normal vue.js app there were no bugs and also the many unit tests I've wrote for the player all pass as well.\r\n\r\nNow this video player that I made, for some reason gets generated twice on page loads. The first time that it generated the video player, it gets put into the DOM (I think) but right after it, it gets replaced with a new video player instance.\r\n\r\nNow the problem is this, when the first video player gets removed, all of the events are still attached and it still tries to load the video. Even though the video player isn't in the DOM anymore, the video still gets played in the background.\r\n\r\nWhat ends up happening is that we end up with two videos playing at the same time, one in background and one from the actual player.\r\n\r\n@manniL and I are very confused about this problem, we've been trying to debug it for a few days but we're getting no where with it.\r\n\r\nI have a feeling that its something to do with how nuxt.js handles the recycling of components. I've done some debugging and saw that the component gets remounted many times, and so does the page component as well. When it gets remounted, I believe it doesn't destroy the video player properly and still leave the `video` element running background + the events.\r\n\r\nNuxt.js shouldn't be creating new instances of the elements on the page, what it should be doing is recycle the elements it already has there. Otherwise you end up with 5 different `video` elements running background, all that have the same video cached in background as well. That's a lot of memory used for no reason.\r\n\r\nThere's no special event that tells me that the DOM is finally done generating and that it won't be generated again so I can't listen for any of the Vue lifecycle, Vue Router or nuxt events to control that either.\r\n\r\n`no-ssr` isn't option either, I've been spending a lot of time trying to implement it using `no-ssr` and that just creates more bugs then it removes.\r\n\r\nThere's a similar issue over here as well, the fix for it was really hacky and its not appropriate solution I believe since older video objects remain in background. https://github.com/nuxt/nuxt.js/issues/2391\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/c2707\">#c2707\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2917],{"name":2918,"color":2919},"2.x","d4c5f9",3126,"closed","Very strange problem, do you think you can help?","2023-01-18T16:09:58Z","https://github.com/nuxt/nuxt/issues/3126",0.71125436,{"description":2927,"labels":2928,"number":2931,"owner":2872,"repository":2932,"state":2921,"title":2933,"updated_at":2934,"url":2935,"score":2936},"https://github.com/Saul-Mirone/milkdown/releases\n\nThis need in depth investigation & refactor as there has been collaborative support related changes.",[2929],{"name":2866,"color":2930},"1ad6ff",513,"nuxt.com","[Milkdown] Upgrade to Milkdown 6.1","2023-06-06T12:14:55Z","https://github.com/nuxt/nuxt.com/issues/513",0.72821045,{"description":2938,"labels":2939,"number":2931,"owner":2872,"repository":2943,"state":2921,"title":2944,"updated_at":2945,"url":2946,"score":2936},"Whenever I run any unit test with a file with `*.nuxt.spec.*` in the name I get the following errors:\r\n\r\n```\r\n[Vue Router warn]: No match found for location with path \"blank\"\r\n[Vue Router warn]: No match found for location with path \"blank\"\r\n[Vue Router warn]: No match found for location with path \"blank\"\r\n[Vue Router warn]: No match found for location with path \"/blank\"\r\n```\r\nI've tried mocking the router and also [creating a new router](https://test-utils.vuejs.org/guide/advanced/vue-router.html#using-a-real-router) but nothing seems to help.\r\n\r\nModalShell.nuxt.spec.ts\r\n```\r\nimport { describe, it, beforeEach, expect } from 'vitest'\r\nimport { VueWrapper } from '@vue/test-utils'\r\nimport { mountWrapper } from '@/tests/testUtils'\r\nimport ModalShell from '@/components/shared/ModalShell.vue'\r\n\r\ndescribe('Invite Members Modal', () => {\r\n let wrapper: VueWrapper\r\n\r\n beforeEach(() => {\r\n wrapper = mountWrapper({\r\n component: ModalShell,\r\n })\r\n })\r\n\r\n it('matches snapshot', () => {\r\n expect(wrapper.html()).toMatchSnapshot()\r\n })\r\n})\r\n```\r\n\r\ntestUtils.ts\r\n```\r\nimport { shallowMount, RouterLinkStub } from '@vue/test-utils'\r\nimport { createTestingPinia } from '@pinia/testing'\r\nimport { createI18n } from 'vue-i18n'\r\nimport messages from '@/lang/messages'\r\n\r\ninterface MountConfig {\r\n component?: object\r\n initialState?: object\r\n props?: object\r\n}\r\n\r\nexport function mountWrapper({ component, initialState, props }: MountConfig) {\r\n const i18n = createI18n({\r\n legacy: false,\r\n globalInjection: true,\r\n locale: 'en',\r\n messages,\r\n })\r\n\r\n return shallowMount(component as object, {\r\n global: {\r\n plugins: [\r\n createTestingPinia({\r\n initialState,\r\n }),\r\n i18n,\r\n ],\r\n stubs: {\r\n NuxtLink: RouterLinkStub,\r\n },\r\n },\r\n props,\r\n })\r\n}\r\n\r\nexport { createTestingPinia }\r\n```\r\n\r\nAny help is appreciated. Thanks",[2940],{"name":2941,"color":2942},"vitest-environment","b60205","test-utils","[Vue Router warn]: No match found for location with path \"blank\"","2023-12-02T00:32:17Z","https://github.com/nuxt/test-utils/issues/513",{"description":2948,"labels":2949,"number":2951,"owner":2872,"repository":2872,"state":2921,"title":2952,"updated_at":2953,"url":2954,"score":2955},"Hello. I have very important module that I can't setup with Nuxt, please help.\r\n\r\n```html\r\n\u003Cvideo id=\"player\" class=\"video-js\" controls autoplay>\r\n \u003Csource src=\"http://vjs.zencdn.net/v/oceans.mp4\" type=\"video/mp4\">\u003C/source>\r\n\u003C/video>\r\n```\r\n```js\r\nmounted () {\r\n video('player')\r\n }\r\n```\r\nThis works only if I navigate directly on that page or reload it. This doesn't work if I navigate to this page from other pages in my app. \r\n\r\nHow 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/c2117\">#c2117\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2950],{"name":2918,"color":2919},2442,"Video.js doesn't work when route on client","2023-01-18T15:55:18Z","https://github.com/nuxt/nuxt/issues/2442",0.74147993,{"description":2957,"labels":2958,"number":2960,"owner":2872,"repository":2872,"state":2921,"title":2961,"updated_at":2962,"url":2963,"score":2964},"My video isn't loading when the component mounts\r\n\r\nI've narrowed down the problem to having something to do with \":src\" in my code. The video loads fine if i hard code the url in however this is supposed to be a unique property for each user. a video avatar name \"this.avatar\" which contains the url to the video.\r\n\r\nThe \":src\" property works fine whenever i have the user load the video from their own files. However after the file is saved and converted to a url it will no longer load on mount.\r\n\r\n```\r\n\u003Ctemplate v-if=\"this.type === 'image'\">\r\n \u003Cb-img key=\"image\" id=\"avatarPhoto\" v-bind=\"profile\" :src=\"this.avatar\" class=\"avatarPhoto\">\u003C/b-img>\r\n\u003C/template>\r\n\u003Ctemplate v-else>\r\n \u003Cvideo playsinline autoplay loop muted key=\"video\" type=\"video\" id=\"avatarVideo\" v-bind=\"profile\" class=\"avatarVideo\">\r\n \u003C!-- the line causing the error is below -->\r\n \u003Csource id=\"videoSrc\" :src=\"this.avatar\">\r\n \u003C/video>\r\n\u003C/template>\r\n```\r\n```\r\n\u003C!-- this is how it renders on load with a url for the prop -->\r\n\r\n\u003Cvideo playsinline=\"\" autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" type=\"video\" id=\"avatarVideo\" class=\"avatarVideo\">\r\n \u003Csource id=\"videoSrc\" src=\"http://remoteserver.com/storage/avatar/profile/1558476637.mp4\">\r\n\u003C/video>\r\n```\r\n```\r\n\u003C!-- this is how it looks when rendered from a file load which works fine but this does not happen on load -->\r\n\r\n\u003Cvideo playsinline=\"\" autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" type=\"video\" id=\"avatarVideo\" width=\"281.25\" height=\"auto\" class=\"avatarVideo\">\r\n \u003Csource id=\"videoSrc\" src=\"data:video/quicktime;base64,blahblahblah\">\r\n\u003C/video>\r\n```\r\n```\r\nasync created() {\r\n await this.$axios.get(\"profile\")\r\n .then((response) => {\r\n this.form.fill(response.data.data)\r\n this.type = this.form.a_type.split('/').shift()\r\n this.avatar = response.data.data.avatar\r\n \r\n if (this.type === 'video'){\r\n this.getVideoDimensions()\r\n .then((dimensions) => {\r\n this.form.a_dimensions = dimensions\r\n this.handleResize(dimensions)\r\n })\r\n .catch((e) =>{\r\n this.toast('error',e.message)\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n if (error.response){\r\n console.log(error.response.data)\r\n this.toast('error', error.response.data.data[0])\r\n }\r\n })\r\n if (process.client){\r\n window.addEventListener('resize',this.handleResize)\r\n }\r\n}\r\n```\r\n\r\n\r\nIt doesn't cause an actual error but when i check the videos readyState it is a value of 0. No information is available about the media resource.\r\n\r\nI expect the video to load with the returned url but it does not.\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\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/c9247\">#c9247\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2959],{"name":2918,"color":2919},5780,"Nuxt video not loading on mount from URL","2023-01-18T20:24:28Z","https://github.com/nuxt/nuxt/issues/5780",0.7544623,{"description":2966,"labels":2967,"number":2969,"owner":2872,"repository":2872,"state":2921,"title":2970,"updated_at":2971,"url":2972,"score":2973},"I'm not able to load a video from `assets` folder, I know this might be solved in #1224. I tried both `~/assets/...` and `~assets/...` but I can't make it work.\r\n\r\nMy component:\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cvideo src=\"~assets/video.mp4\">\r\n \u003Cp>Your browser does not support the video tag.\u003C/p>\r\n \u003C/video>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nMy assets folder:\r\n\r\n\r\nAm I doing something wrong?\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/c1783\">#c1783\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2968],{"name":2918,"color":2919},2008,"Load video from assets folder","2023-01-18T15:42:55Z","https://github.com/nuxt/nuxt/issues/2008",0.7562225,["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fIk2l02fN8buqzTQYe6km7yYJKnRUOwfYLpErrSw95mI":-1},"/nuxt/nuxt/2391"]