Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

465
Views
¿Dónde colocar mixins personalizados de Vue y funciones auxiliares en un proyecto de Nuxt?

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:

  • Estas funciones se importarán solo cuando sea necesario (no global)
  • Estas funciones serán probadas

Documentación de la estructura del directorio Nuxt

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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í:

ingrese la descripción de la imagen aquí

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], ... }
over 4 years ago · Santiago Trujillo Report

0

puede poner el archivo mixins en 2 carpetas.

  1. puede crear global-mixin.js en la carpeta de complementos y luego configurar este archivo en plugins: [] parte en nuxt.config. Enlace
  2. puede crear una carpeta mixins y crear mixin.js en eso. Enlace

Pero los documentos de nuxt.js sugirieron que la primera solución era correcta

over 4 years ago · Santiago Trujillo Report

0

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).

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!