Vite config for Vue 3 front end and Vue 2 for building Fieldtypes

[tom-sk]

I am having issues when registering a component to be used in the control panel.

In the docs it shows how to add assets to you build process like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue2 from '@vitejs/plugin-vue2'; 
 
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/site.css',
                'resources/js/site.js',
                'resources/css/cp.css',  
                'resources/js/cp.js',  
            ],
            refresh: true,
        }),
        vue2(), 
    ],
});

But my config is already using vue 3 and looks like this:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    laravel(['resources/js/app.js']),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
})

What should a vite config look like for using vue 3 and vue 2? Or should I be using a different solution altogether?

[jasonvarga]

I'm not sure that you can have two different versions of Vue required at the same time, so maybe you can try putting your CP build tooling in a separate directory from your app's.

/
|-- cp/
|   |-- vite.config.js
|   |-- package.json
|   |-- node_modules/
|-- vite.config.js
|-- package.json
|-- node_modules/

[tom-sk]

Thanks for the reply, once the config has been moved how would I access the JS generated for the CP?

Do you know of any example repos that have used vue 3 and custom field types?