Failing importing vue2 version

[rafalm-cyber]

Here is reproduction: https://stackblitz.com/edit/nuxt-starter-playground-gckgi7?file=plugins%2Fflipbook.js

import Flipbook from 'flipbook-vue/vue2' gives this error:

[rafalm-cyber]

I have to import it like this: import Flipbook from 'flipbook-vue/dist/vue2/flipbook.mjs' now it works :)

[ts1]

not it works Did it work or not?

I tried it myself, import Flipbook from 'flipbook-vue/dist/vue2/flipbook.mjs' failed to import dependencies of Flipbook. import Flipbook from 'flipbook-vue/dist/vue2/flipbook.cjs' succeeds.

Anyway, I'll have to investigate how to play nice with Nuxt.

[AndreiD]

@ts1 did you find out how to make it work with Nuxt.js ?

[kabaluyot]

Hello.

For Nuxt 2, easiest way is to register it as a plugin component.

Under plugins/components/vue-flipbook.ts, register it as a global Vue component:

import Vue from 'vue'
import Flipbook from 'flipbook-vue/dist/vue2/flipbook.cjs'

Vue.component('Flipbook', Flipbook)

Then in nuxt.config.ts,

  plugins: [
    ...
    { src: '~/plugins/components/vue-flipbook' },
  ],

If you are using TypeScript (Nuxt 2 class component), register a module type so it won't return tslint errors:

declare module 'flipbook-vue/dist/vue2/flipbook.cjs'

Then should work in your vue files:

<template>
  <v-container class="home__container mx-auto">
    <Flipbook
      class="flipbook"
      :pages="[
        null,
        '/book/3.png',
        '/book/1.png',
        '/book/2.png',
        '/book/4.png',
      ]"
    ></Flipbook>
  </v-container>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  layout: 'empty',
  head() {
    return {
      title: 'Home',
    }
  },
})
export default class Index extends Vue {}
</script>

<style scoped>
.flipbook {
  width: 90vw;
  height: 90vh;
}
.home__container {
  max-width: 1440px;
}
</style>

[ts1]

@AndreiD Not really. It looks like the offender is babel-loader. It is in Nuxt 2 and not in vue-cli, which successfully builds in examples/vue2module.