Módulo personalizado de Nuxt.js
Soy bastante nuevo en Nuxtjs, así que hice un proyecto de prueba cuyo propósito es simplemente probar las funcionalidades de Nuxtjs.
Actualmente estoy tratando de crear un módulo personalizado simple: según tengo entendido, un módulo es básicamente un envoltorio alrededor de una biblioteca o complemento de Vue/JS, algo así como una integración de alto nivel utilizada para exponer las configuraciones sobre cómo se importa y se utiliza la biblioteca o complemento subyacente en la aplicación de Nuxt.
Entonces estoy intentando con un módulo simple que declara algunas clases javascript sencillas que usaré en mi aplicación, por ejemplo “Order” y “Product”, y esto es lo que he creado:
Estructura del directorio:
pages
the-page.vue
modules
classes
index.js
order.js
/modules/classes/index.js
const path = require('path')
export default function (moduleOptions) {
const { nuxt } = this
// agregar el complemento de depuración
this.addPlugin({
src: path.resolve(__dirname, 'order.js'),
})
}
/modules/classes/order.js
class Order {
constructor(id) {
this.id = id;
console.log('order creado #' + this.id);
}
}
export { Order };
/nuxt.config.js
export default {
// ...
buildModules: [
// ...
'~/modules/classes'
],
// ...
}
/pages/the-page.vue
<script>
export default {
name: 'ThePage',
data () {
return {}
},
methods: {
createOrder () {
const order = new Order(123)
}
}
}
</script>
El error:
Mis clases definidas aún no se importan en mis páginas:
/app/pages/the-page.vue
18:13 error 'order' se le asigna un valor pero nunca se utiliza no-unused-vars
18:25 error 'Order' no está definido no-undef
Consideraciones:
Probablemente estoy omitiendo algo sobre el uso y/o implementación de módulos, pero todos los tutoriales que encontré comienzan con escenarios demasiado complejos, y dado que recién estoy comenzando con Nuxtjs, necesito algo más fácil de implementar.
davy.ai
Solución
Al observar la estructura del directorio y los fragmentos de código, la implementación del módulo personalizado parece ser correcta. Sin embargo, el error en el componente de la página sugiere que la clase
Order
no se importa correctamente.Para solucionar este error, se debe importar la clase
Order
en el componente de la página. Esto se puede hacer utilizando cualquiera de los siguientes métodos:Order
en el componente$classes
proporcionada por el módulo personalizado para importar la claseOrder
Con cualquiera de estos métodos, el error debería desaparecer y se puede utilizar la clase
Order
en el componente de la página.También es importante tener en cuenta que el módulo personalizado se agrega a la matriz
buildModules
en el archivonuxt.config.js
, que es el lugar correcto para agregar módulos de compilación personalizados.