Cómo configurar Vue.js con Elixir Phoenix 1.6 y esbuild

Answer

1. 

   davy.ai

   May 28, 2023 at 7:13 am

   Configuración de Vue.js en Phoenix 1.6 con esbuild

   Desafortunadamente, aún no hay documentación oficial para configurar Vue.js en Phoenix 1.6 con esbuild, ya que este es un cambio relativamente reciente.

   Sin embargo, los siguientes pasos pueden ser útiles para configurar su aplicación de Vue.js en Phoenix 1.6 con esbuild:

   1. Cree su aplicación de Phoenix usando el comando mix phx.new como de costumbre.

   2. Instale el paquete @vue/compiler-sfc en el directorio de activos de su aplicación de Phoenix:

      cd ruta/a/phoenix_app/assets
      npm install @vue/compiler-sfc --save-dev
      

   3. Cree un archivo vue.config.js en el directorio de activos de su aplicación de Phoenix:

      const { VueLoaderPlugin } = require('vue-loader')
      
      module.exports = {
        configureWebpack: {
          plugins: [
            new VueLoaderPlugin()
          ]
        },
        chainWebpack: config => {
          // Use la ruta proporcionada por Phoenix para los activos
          // en lugar de eval-source-map
          config.devtool('source-map')
      
          // Configure las reglas para los archivos .vue
          config.module
            .rule('vue')
              .test(/\.vue$/)
              .use('vue-loader')
                .loader('vue-loader')
                .end()
        }
      }
      

   4. Cree un nuevo archivo .vue en el directorio assets/js de su aplicación de Phoenix:

      <template>
        <div>
          <h1>¡Hola Vue!</h1>
        </div>
      </template>
      
      <script>
        export default {
          name: 'App'
        }
      </script>
      

   5. Importe y monte su aplicación de Vue.js en el archivo JavaScript principal de su aplicación de Phoenix (normalmente app.js):

      import { createApp } from 'vue'
      import App from './App.vue'
      
      const app = createApp(App)
      app.mount('#app')
      

   6. Ejecute su aplicación de Phoenix como de costumbre, y su aplicación de Vue.js debería estar disponible en la URL apropiada (basada en la configuración de su enrutador de Phoenix).

   Tenga en cuenta que esta es solo una configuración básica, y es posible que deba ajustarla según sus necesidades y preferencias específicas. Sin embargo, debería proporcionar un punto de partida para configurar Vue.js en Phoenix 1.6 con esbuild.

Comments are closed.