The code
/main.js
The Problem
I'm trying to build a simple tic-tac-toe app in StackBlitz. This is my main.js file:
import Vue from "vue";
import App from "./App.vue";
import TicTacToe from "./ponents/TicTacToe";
import Cell from "./ponents/Cell";
Vueponent("tic-tac-toe", TicTacToe); // error: "cannot read property 'ponent' of undefined"
Also note my package.json
file has vue as a dependency:
"dependencies": {
"vue": "^3.0.0"
},
So the error means Vue needs to be defined, ok so I refer to the 3x documentation:
const app = Vue.createApp({ /* options */ })
But I get Cannot read property 'createApp' of undefined
So then I try to define an instance:
const Vue = new Vue({});
I get Cannot access 'Vue' before initialization
So, based on a google search of that error, I try:
Vue = new Vue({})
And I get vue_1.default is not a constructor
.
So what am I doing wrong?
The code
https://stackblitz./edit/vue-ttt?file=src/main.js
The Problem
I'm trying to build a simple tic-tac-toe app in StackBlitz. This is my main.js file:
import Vue from "vue";
import App from "./App.vue";
import TicTacToe from "./ponents/TicTacToe";
import Cell from "./ponents/Cell";
Vue.ponent("tic-tac-toe", TicTacToe); // error: "cannot read property 'ponent' of undefined"
Also note my package.json
file has vue as a dependency:
"dependencies": {
"vue": "^3.0.0"
},
So the error means Vue needs to be defined, ok so I refer to the 3x documentation:
const app = Vue.createApp({ /* options */ })
But I get Cannot read property 'createApp' of undefined
So then I try to define an instance:
const Vue = new Vue({});
I get Cannot access 'Vue' before initialization
So, based on a google search of that error, I try:
Vue = new Vue({})
And I get vue_1.default is not a constructor
.
So what am I doing wrong?
Share Improve this question edited Oct 18, 2020 at 21:44 Boussadjra Brahim 1 asked Oct 18, 2020 at 20:36 Travis HeeterTravis Heeter 14.1k13 gold badges95 silver badges142 bronze badges2 Answers
Reset to default 7When you work with bundler like vue-cli, webpack or vite ..., you should import createApp
to create new instance and use it for app.use
or app.ponent
... :
import { createApp } from "vue";
const app = createApp({ /* options */ })
Using CDN like :
<script src="https://unpkg./vue@next"></script>
the Vue instance is available globally so you could use it as follows :
const app = Vue.createApp({ /* options */ })
You are getting this error because Vue3 is using named export instead of a default export. You can read more about it here.
You can fix this error by simply importing all the named exports onto an object called Vue
:
import * as Vue from 'vue';