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.