Level 102
So the problem is solved?
Sep 23, 2022
11
Level 1
ReferenceError: createApp is not defined in Vue3
I get this error: ReferenceError: createApp is not defined at ... in the console.
I use:
- OS: Windows 10
- Browser: Chrome Version 105.0.5195.127
- Version Laravel: 9.19
- Version VueJs: 3.2.36
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
}),
],
});
package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^0.27",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vite": "^3.0.0"
},
"dependencies": {
"vue": "^3.2.36",
"vue-loader": "^17.0.0",
"@vitejs/plugin-vue": "^3.1.0"
}
}
app.js
import './bootstrap';
import {createApp} from 'vue';
welcome.blade.php
<head>
...
</head>
<body>
<div id="appVue">@{{ message }}</div>
@vite('resources/js/app.js')
</body>
<script>
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#appVue')
</script>
after running npm run dev, everything is ok, I have no errors, but I get this error: ReferenceError: createApp is not defined at ...
Level 1
@Sinnbeck the problem is not solved
Level 102
@Hexman Ah ok I see. You want to use it outside of you js files. You need to bind it to the window then
import {createApp} from 'vue';
window.createApp = createApp
The same goes for other things you need access to :)
Level 1
@Sinnbeck
Thanks for your answer, but it doesn't work.
I added in app.js: window.createApp = createApp but I get the same error in the console.
Level 102
@Hexman And you recompiled ? Try npm run build
Level 1
@Sinnbeck yes I tried and it doesn't work
Level 102
@Hexman Any change if you set the script as a module?
<script type="module">
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#appVue')
</script>
Level 1
@Sinnbeck I tried, the error no longer appears, I receive this message in the console: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". at <App>
But the value from the message is not displayed in the blade
Level 102
@Hexman Try
import { createApp } from 'vue/dist/vue.esm-bundler';
1 like
Level 1
@sinnbeck Yes it works! Thank you!
Level 102
@Hexman Great :) Happy to help
1 like
Please or to participate in this conversation.