search

wangbinyq / vue-retina

a retinajs binding of vue2
7 stars 1 forks source link

Use with Nuxt #2

Open joakimglaving opened 6 years ago

joakimglaving commented 6 years ago

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 commented 6 years ago

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