0

Llevo dos dias intentando integrar Django 3 con Vue 3 y en parte lo he logrado pero no como quisiera.

Escenario. La idea es utilizar Vue 3 para los componentes que requieren Javascript y que no son importantes para el SEO como formularios de reservas, etc…

Realice la integración utilzando django-webpack-loader para inyectar el bundle en las plantilla de django.

Este es el archivo vue.config.js

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: "http://0.0.0.0:8080/",
  outputDir: './dist/',

    pages: {
        main: {
            // entry for the page
      entry: 'src/main.js',
    }
    },

  chainWebpack: config => {

    config.optimization
      .splitChunks(false)

    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{filename: './webpack-stats.json'}])

    config.resolve.alias
      .set('__STATIC__', 'public')

    config.devServer
      .public('http://0.0.0.0:8080')
      .host('0.0.0.0')
      .port(8080)
      .hotOnly(true)
      .watchOptions({poll: 1000})
      .https(false)
      .headers({"Access-Control-Allow-Origin": ["\*"]})
  }
};

Este es el contenido del main.js que es punto de entrada de la app de Vue3

import { createApp, reactive, ref } from 'vue'

const app = createApp({
  el: '#app',
  delimiters: ['[[', ']]'],
  setup() {
  
    const data = {
      returned_task: ref(''),
      temp_task: ref(''),
      modify_index: ref(-1),
      tasks: reactive([]),
    }
    
    const methods = {
      select: (index) => {
        if (data.modify_index.value === index){
          data.modify_index.value = -1;
        } else {
          data.modify_index.value = index
          data.temp_task.value = data.tasks[data.modify_index.value]
        }
      },
      deleteSelected: () => {
        data.tasks.splice(data.modify_index.value, 1);
        data.modify_index.value = -1;
      },
      updateSelected: () => {
        data.tasks.splice(data.modify_index.value, 1, data.temp_task.value);
        data.modify_index.value = -1;
      }
    }
    
    // created lifecycle event is not needed  but let's mock a delay
    setTimeout(() => {
      data.tasks.splice(0, 0, ...['do this 🐱‍🐉', 'and that 🤳']);
    }, 120);
    

    return {
      ...data,
      ...methods
    }
  }
})

app.mount('#app')

y esta en la plantilla html donde se debe renderizar Vue

<div id="app">
   [[modify_index]]
      <ul>
        <li v-for="task in tasks">[[task]]</li>
      </ul>
</div>

Lo que sucede es que no se renderiza nada dentro del div #app tampoco se muestgra ningún error y no podido encontrar muchas referencias en la web.

Gracias a quien me pueda tirar una mano.

1 respuesta 1

0

Solucionado... El problema estaba en el archivo vue.config.js. Fue necesario añadir la opción runtimeCompiler: true, a la configuración.

He creado además un post sobre como integrar Django 3 y Vue 3 en proyecto utilizando webpack para todo el que lo necesite

Espero pueda ser de utilidad.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.