How do I re-write my VueJS2 components using VueJS3 syntax?

Question

I have upgraded my Laravel 5.8 to Laravel 9 and now I am using ViteJS instead of laravel-mix. My Vue components now looks there are obsolete some how:

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
19:24:27 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
  Plugin: vite:import-analysis
  File: /Users/marcellopato/Documents/Sites/wb9/resources/js/components/UploadForm.vue:6:101
  4  |              <input type="file" name="image" class="" @change="GetImage" accept="image/*">
  5  |              <img :src="avatar" alt="Imagem" class="drop">
  6  |              <a href="#" v-if="loaded" class="btn btn-success m-t-10" @click.stop="Upload">Enviar</a>
     |                                                                                                      ^
  7  |              <a href="#" v-if="loaded" class="btn btn-danger m-t-10" @click.stop="Cancel">Cancelar</a>
  8  |              <span class="custom-file-control text-muted"><slot></slot> CPF: <span v-text="cpf"></span></span>
      at formatError (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46)
      at TransformContext.error (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19)
      at TransformContext.transform (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39475:22)
      at async Object.transform (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30)
      at async loadAndTransform (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29)

I did install the @vitejs/plugin-vue plugin and imported on app.js file like so:

import '@vitejs/plugin-vue'; but looks like it is not working. Should it re-wirte my .vue files? Or maybe I should re-write by myself? There is a guide to follow?

If it is not needed, don't rewrite them. No point in breaking your app and redoing it from top to bottom if it already works. Update only where it's needed/blocking and mainly: do it incrementally when needed. — kissu
– kissu, Commented Jan 25, 2023 at 10:53

Ahmed Sbai · Accepted Answer · 2023-01-24 23:11:08Z

1

update your package.json and your vite.config.js files like below

package.json :

"@vitejs/plugin-vue": "^3.2.0",
"vite": "^3.0.0",

vite.config.js :

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

answered Jan 24, 2023 at 23:11

Ahmed Sbai

16.5k11 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcello Pato Over a year ago

But something is not right. Looks like my blade file is not using the correct syntax. Can you tell me where can I find, how can I upgrade it? Thanks!

Collectives™ on Stack Overflow

How do I re-write my VueJS2 components using VueJS3 syntax?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related