Nuxt.js: Load video from assets folder

[sdq-sts]

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.

My component:

<template>
  <div>
    <video src="~assets/video.mp4">
      <p>Your browser does not support the video tag.</p>
    </video>
  </div>
</template>

My assets folder:

Am I doing something wrong?

_{This question is available on Nuxt.js community (#c1783)}

[clarkdo]

~/assets should work. Which version of Nuxt do you use ?
If it's convenient, would you pleas offer a jsfiddle or demo repo ?

[sdq-sts]

Hi, I'm using 1.0.0-rc11.
I forgot to mention I'm getting the following error in the console:

GET http://localhost:3000/~/assets/video.mp4 net::ERR_ABORTED

I'm trying to push my code to github, wait a minute.

[sdq-sts]

My code is here:

https://github.com/sdq-sts/nuxt-test

and the component is:

https://github.com/sdq-sts/nuxt-test/blob/master/components/home/Video.vue

[sdq-sts]

I found a temporary solution and it will do for now. Changed the path from:

<video src="'~/assets/video.mp4"></video>

to

<video :src="require('~/assets/video.mp4')"></video>

[clarkdo]

Issue will be fixed in https://github.com/nuxt/nuxt.js/pull/2016, for a temporary fix, you can add config under build.extend in nuxt.config.js.

 build: {
    extend (config, ctx) {
      const vueLoader = config.module.rules.find((loader) => loader.loader === 'vue-loader')
      vueLoader.options.transformToRequire = {
        video: 'src',
        source: 'src'
      }
    }
}

[tetreault]

i tired this @clarkdo and it does not work for me. Nuxt version is ^1.0.0

[clarkdo]

@tetreault
You can check your vue-loader version, if it's v15, the property has been renamed to transformAssetUrls

https://vue-loader.vuejs.org/migrating.html#options-deprecation

And you can also use build.vueLoader in nuxt.config.js to customize vue-loader configuration:

export default {
  mode: 'spa',
  transition: false,
  build: {
    vueLoader: {
      transformAssetUrls: {
        // ...
      }
    }
  }
}

[tetreault]

thanks for the quick reply @clarkdo will look into that

[waynelau]

Just ran into the same issue as well. I'm using nuxt 1.0.0. I wound up using the same workaround for the time being that @sdq-sts posted above (thanks for including this).

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.