Home>

Code from main.js

import Vue from 'vue'
import App from 'pages/App.vue'
new Vue({
    el: '#app',
    render: a=> a(App)
})

Code from App.vue

<template>  <div>    <div v-if="!profile">You need to login with <a href="/login">Google</a></div>    <div v-else>      <div>{{ profile.name }}&
nbsp;<a href="/logout">Exit</a></div>      <!--<messages-list :messages="messages"/> -->    </div></div></template><script> export default {
     data() {
       return{
         messages: frontendData.messages,
         profile:frontendData.profile
       }
     }
 }
</script><style></style>

Package.json

{
  "name": "sarafan",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  scripts: {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" &
&
 exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.30",
    "vue-loader": "^17.0.0",
    "vue-resource": "^1.5.3"
  },
  "devDependencies": {
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

Error

I can't figure out what's wrong, please help

  • Answer # 1

    I was able to fix it by changing the code in main.js to the following:

    import { createApp } from 'vue'
    import App from 'pages/App.vue'
    export const eventBus= createApp(App)
    createApp(App).mount('#app')
    

    I would be grateful if someone could explain what was wrong

    It is not customary to ask new questions in the answer here.

    Spatz2022-02-15 06:33:15