Tengo un proyecto de Nuxt y necesito hacer funciones personalizadas y mixins de Vue para reutilizar en componentes y páginas de Vue.
¿En qué carpeta debo poner los archivos que contienen estos? ¿Debo crear una carpeta 'lib' en el nivel superior del proyecto Nuxt y colocar los archivos allí?
Detalles adicionales si eso puede ayudar:
en mi proyecto nuxt, generalmente agrego cuatro carpetas en el nivel del directorio raíz del proyecto, que son mixins para todos mis mixins, models para los modelos o clases que uso en toda la aplicación, services que contienen todos los puntos finales de mi API y utils que contiene todas mis funciones de utilidad y otras funciones generales como las funciones de validación de mi entrada y mi directorio se ve así:
en el caso de los mixins , puede importar el mixin requerido en el componente deseado y usarlo como lo haría normalmente:
import someMixin from '@/mixins/someMixin' ... export default { mixins: [someMixin], ... }puede poner el archivo mixins en 2 carpetas.
plugins: [] parte en nuxt.config. EnlacePero los documentos de nuxt.js sugirieron que la primera solución era correcta
Como Nuxt no tiene un directorio específico para mixins, puede crearlos como cualquier otro complemento que tenga en su proyecto. Prefiero tener mis complementos usados en exceso en una carpeta llamada common . Es tu elección realmente. Pero como desea reutilizarlos a lo largo de su proyecto, es posible que desee usar mixins globales, que son similares, pero pueden provocar una pérdida de memoria cuando no se manejan correctamente. Entonces necesitamos algún tipo de bandera para evitar que se registre varias veces.
Por lo tanto, cree un directorio que le guste (por ejemplo myMixinFolder ). Por ejemplo, voy a crear un archivo mixin. Creo un archivo dentro de myMixinFolder y lo llamo my-mixin-plugin.js .
import Vue from "vue" if (!Vue.__my_mixin__) { Vue.__my_mixin__ = true Vue.mixin({ methods: { sayIt(name) { console.log(`Hello dear ${name}`) } } }) } Luego agréguelo al archivo nuxt.config.js :
plugins: [ { src: '~/plugins/my-mixin-plugin.js' }, ],Ahora puedes usarlo en cualquier componente como este:
<template> <span>{{ sayIt('Batman') }}</span> </template> O dentro script :
this.sayIt('Batman')De esta manera, no necesita importar mixins una y otra vez (aunque debe tener cuidado si tiene más de un archivo mixin para evitar la pérdida de memoria).