How to set Vuetify 3 in a Wails project to fix "Could not find defaults instance"?

[gilles6]

Description

This is about setting up Vuetify3 with Wails.

To Reproduce

I have created a Wails project:

wails init -n myproject -t vue-ts
cd myproject

Then I installed Vuetify with:

npm install vuetify@^3.1.5 --save

Then, I've set Vuetify by replacing the content of frontend/src/main.ts:

import {createApp} from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

with:

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
    components,
    directives,
})

createApp(App).use(vuetify).mount('#app')

To test it, I have just add a <v-btn>FOO</v-btn> in frontend/src/components/HelloWorld.vue but I'm getting the following error in the browser console:

[Vue warn]: inject() can only be used inside setup() or functional components.
warn2 @ chunk-ICSI7ZZO.js?v=7b367156:1172
inject @ chunk-ICSI7ZZO.js?v=7b367156:1641
useDefaults @ chunk-ICSI7ZZO.js?v=7b367156:5015
setup @ chunk-ICSI7ZZO.js?v=7b367156:5090
callWithErrorHandling @ vue.js?v=7b367156:1415
setupStatefulComponent @ vue.js?v=7b367156:6836
setupComponent @ vue.js?v=7b367156:6799
mountComponent @ vue.js?v=7b367156:5583
processComponent @ vue.js?v=7b367156:5561
patch @ vue.js?v=7b367156:5279
mountChildren @ vue.js?v=7b367156:5424
mountElement @ vue.js?v=7b367156:5356
processElement @ vue.js?v=7b367156:5343
patch @ vue.js?v=7b367156:5277
mountChildren @ vue.js?v=7b367156:5424
mountElement @ vue.js?v=7b367156:5356
processElement @ vue.js?v=7b367156:5343
patch @ vue.js?v=7b367156:5277
componentUpdateFn @ vue.js?v=7b367156:5674
run @ vue.js?v=7b367156:396
instance.update @ vue.js?v=7b367156:5763
setupRenderEffect @ vue.js?v=7b367156:5771
mountComponent @ vue.js?v=7b367156:5596
processComponent @ vue.js?v=7b367156:5561
patch @ vue.js?v=7b367156:5279
mountChildren @ vue.js?v=7b367156:5424
processFragment @ vue.js?v=7b367156:5541
patch @ vue.js?v=7b367156:5273
componentUpdateFn @ vue.js?v=7b367156:5674
run @ vue.js?v=7b367156:396
instance.update @ vue.js?v=7b367156:5763
setupRenderEffect @ vue.js?v=7b367156:5771
mountComponent @ vue.js?v=7b367156:5596
processComponent @ vue.js?v=7b367156:5561
patch @ vue.js?v=7b367156:5279
render2 @ vue.js?v=7b367156:6138
mount @ vue.js?v=7b367156:4791
app.mount @ vue.js?v=7b367156:8688
(anonymous) @ main.ts:11
vue.js?v=7b367156:1303 [Vue warn]: Unhandled error during execution of setup function 
  at <VBtn> 
  at <HelloWorld> 
  at <App>
Uncaught Error: [Vuetify] Could not find defaults instance
    at useDefaults (chunk-ICSI7ZZO.js?v=7b367156:5017:11)
    at setup (chunk-ICSI7ZZO.js?v=7b367156:5090:24)
    at callWithErrorHandling (vue.js?v=7b367156:1415:18)
    at setupStatefulComponent (vue.js?v=7b367156:6836:25)
    at setupComponent (vue.js?v=7b367156:6799:36)
    at mountComponent (vue.js?v=7b367156:5583:7)
    at processComponent (vue.js?v=7b367156:5561:9)
    at patch (vue.js?v=7b367156:5279:11)
    at mountChildren (vue.js?v=7b367156:5424:7)
    at mountElement (vue.js?v=7b367156:5356:7)

Expected behaviour

I should get a Vuetify button <v-btn>FOO</v-btn> showing up.

How should I fix this issue ?

Screenshots

No response

Attempted Fixes

No response

System Details

$wails doctor
Wails CLI v2.3.1

Scanning system - Please wait (this may take a long time)...Done.

# System

OS           | MacOS   
Version      | 13.1    
ID           | 22C65   
Go Version   | go1.19.4
Platform     | darwin  
Architecture | amd64   

# Wails

Version | v2.3.1

# Dependencies

Dependency                | Package Name | Status    | Version     
Xcode command line tools  | N/A          | Installed | 2396        
npm                       | N/A          | Installed | 8.3.1       
*Xcode                    | N/A          | Installed | 14.2 (14C18)
*upx                      | N/A          | Available |             
*nsis                     | N/A          | Available |             
* - Optional Dependency

# Diagnosis

Your system is ready for Wails development!
Optional package(s) installation details: 
  - upx : Available at https://upx.github.io/
  - nsis : More info at https://wails.io/docs/guides/windows-installer/

 ♥   If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

Additional context

No response

[leaanthony]

For something like this, it would be better to ask on the discord server as this isn't a Wails bug or feature request.

https://discord.com/invite/JDdSxwjhGf

Thanks.