Use with Nuxt

[joakimglaving]

Hello, I have previously been using this with vanilla Vue, but after moving to Nuxt, it doesn't seem to work anymore.

I created a plugin vue-retina.js:

import Vue from 'vue'
import retina from 'retinajs'
import VueRetina from 'vue-retina'

Vue.use(VueRetina, {retina})

And then in nuxt.config.js:

plugins: [
    '~/plugins/vue-retina.js'
]

And in my components I use it as in vanilla Vue:

<img class="slider"
        :src="images[currentNumber % images.length]" v-rjs="2"
/>

But I am only getting the "small" images, not the ones with @2.

Anything I am doing wrong?

[matijse]

By default nuxt adds hashes of the filename to the images, so simply adding @2x to the end of the filename will not work. It is possible to specify a custom path instead of the 2 in v-rjs. Nuxt will only recognise these assets when you use require to load them.

This should work:

<img src="~/assets/icon-back.png" v-rjs="require('~/assets/icon-back@2x.png')">

This generates 2 images that nuxt will serve, for example

• icon-back.60d049b.png
• icon-back@2x.15b36fb.png