0
189
Views¿Cómo tener un flipbook como turn.js en Nuxt?
Cómo importar turn.js al proyecto nuxt.js. Cuando uso a través del complemento, aparece el error Ventana no definida, aunque lo usé en modo cliente
- Actualización : utilicé la verificación del paquete requerido es el cliente, pero aparece el error jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...).turn no es una función
<template> <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard" /> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> <div> Page 4 </div> <div class="hard" /> <div class="hard" /> </div> </template> <script> import $ from 'jquery'; if (process.client) { require('turn.js'); } export default { mounted() { console.log($('#flipbook').turn('page')); $('#flipbook'.turn({ width: 400, height: 300, autoCenter: true, })); }, }; </script>1 answers
Answer question0
EDITAR + TLDR : use flipbook-vue porque es mejor en cualquier punto realmente (peso, mantenimiento, flexibilidad, no depende de jQuery, etc.).
Esto también funciona perfectamente bien con Nuxt como se muestra aquí .
Si necesita instalar jQuery en su proyecto Nuxt (que no recomiendo ), puede seguir mi respuesta aquí . Aún así, una alternativa sin jQuery sería muy apreciada en mi opinión, incluso más si la está usando solo para seleccionar un elemento en el DOM. ¿Vale 20kb?
Si desea apuntar a un elemento específico disponible en su componente, use la sintaxis de $refs , como se explica en esta otra respuesta . Y no un querySelector habitual.
require está basado en nodos, debería usar import ya que se encuentra en un ecosistema moderno basado en navegador cuando usa Vue. Por lo tanto, importar su paquete localmente con una importación dinámica sigue siendo la mejor manera de hacerlo aquí.
TLDR: algo como esto suele ser suficiente para que funcione
<template> <div id="flipbook" ref="flipbook"> <div class="hard"> Turn.js </div> <div class="hard" /> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> <div> Page 4 </div> <div class="hard" /> <div class="hard" /> </div> </template> <script> export default { async mounted () { if (process.client) { const turnJs = await import('turn.js') this.$refs.flipbook.turnJs.turn({ width: 400, height: 300, autoCenter: true, }) } } } </script>Mientras tanto , el proyecto no recibió ninguna actualización durante ya 10 años, así que supongo que puedes pasar por alto este.
Escribir uno propio con un poco de CSS + JS también es totalmente factible y proporcionará los mejores resultados en mi opinión.