Sorry but I can't make it work with Vue3

[maxacarvalho]

Versions:

• @inertiajs/inertia version: ^0.8.7
• @inertiajs/inertia-vue3 version: ^0.3.13

Describe the problem:

I am simply installing Inertia for the first time and trying it out in a new project.
I got it working with Vue2 but since Tailwind released the Vue components I would like to use Vue3 instead (Tailwind components require Vue3).

So, when I try to run in the browser I just get a bunch of errors,I already tried many things and nothing will work. The exact same project works just fine with Vue2.

Errors from the browser 👇🏽

Steps to reproduce:

package.json

{
  "private": true,
  "scripts": {},
  "dependencies": {
    "@inertiajs/inertia": "^0.8.7",
    "@inertiajs/inertia-vue3": "^0.3.13",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/typography": "^0.4.0",
    "@vue/compiler-sfc": "^3.0.11",
    "autoprefixer": "^10.2.5",
    "laravel-mix": "^6.0.16",
    "postcss": "^8.2.10",
    "tailwindcss": "^2.1.1",
    "vue": "^3.0.11",
    "vue-loader": "^15.9.6"
  }
}

webpack.mix.js

const path = require('path');
const mix = require('laravel-mix');

mix
  .js('src/js/app-inertia.js', 'app-inertia.js').vue({ version: 3 })
  .postCss('src/css/app-inertia.css', 'app-inertia.css')
  .setPublicPath('../public/inertia')
  .webpackConfig({
    resolve: {
      alias: {
        '@': path.resolve('src/js'),
        vue: path.resolve('node_modules', 'vue'),
      },
    },
  });

app-inertia.js

import { createApp, h } from 'vue';
import { App, plugin } from '@inertiajs/inertia-vue3';

const el = document.getElementById('app');

createApp({
  render: () => h(App, {
    initialPage: JSON.parse(el.dataset.page),
    resolveComponent: name => require(`./Pages/${name}`).default,
  }),
}).use(plugin).mount(el);

I'm just trying to load one page Index.vue:

<template>
  <div>Index</div>
</template>

<script>
export default {
};
</script>

Thanks in advance.

[bakanyaka]

You need vue-loader 16+ for vue3 if I'm not mistaken. And by the way you can use Laravel Breeze to scaffold new Laravel app with inertia and vue3

[maxacarvalho]

Hi @bakanyaka thanks for your reply.
I got it working just now, I honestly don't know for sure what was the issue, since I basically rebuild the application structure from the scratch. But I can see that I'm now using "vue-loader": "^16.2.0" so yes, that might be the issue.