#Django + Vue + Vite

1 messages · Page 1 of 1 (latest)

keen forge
#

I'm trying to get a django application integrated with Vite(Vue) and it looks like my app is not getting mounted. I'm getting the following error:

chunk-U3LI7FBV.js?v=43664698:2116 [Vue warn]: Failed to mount app: mount target selector "#app" returned null.

Furthermore, I noticed that when I look at my sources, everything involving Vue appears twice. I included a screenshot. I think the problem is in my vite.config.js file, but I'm not sure. Here's what that looks like:

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'node:path';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  root: resolve('./src'),
  base: '/static/vite/',
  resolve: {
//    extensions: ['.js', '.json', '.vue', '.less', '.scss'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
//  build: {
//    outDir: resolve('./dist/vite'),
//    rollupOptions: {
//      input: {
//        main: resolve('./src/js/main.js'),
//        test: resolve('./src/js/test.js'),
//      },
//    },
//  },
})

As you can see, I tried a few things and commented them out. Not sure what to do next. Eventually, I'm going to want to add docker to the mix, but I want to get this working first using npm run dev and python manage.py runserver. Once I get over that, then I will try implementing docker. If anyone can see my issue or if they have a good tutorial, I'd really appreciate it. Thanks in advance.

quiet patio
#

I assume you're doing a backend DJANGO Restful API with a frontend Vue/Vite Single Page App (SPA) ?