es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Módulo personalizado de Nuxt.js

28 Jul, 2023 Programación

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    1. Importando directamente la clase Order en el componente
    <script>
import { Order } from '~/modules/classes/order'

export default {
  name: 'ThePage',
  data () {
    return {}
  },
  methods: {
    createOrder () {
      const order = new Order(123)
    }
  }
}
</script>
    1. Utilizando la propiedad $classes proporcionada por el módulo personalizado para importar la clase Order
    <script>
export default {
  name: 'ThePage',
  data () {
    return {}
  },
  methods: {
    createOrder () {
      const Order = this.$classes.Order
      const order = new Order(123)
    }
  }
}
</script>

    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 archivo nuxt.config.js, que es el lugar correcto para agregar módulos de compilación personalizados.

Comments are closed.