Блог

Эта ошибка возникает каждый раз, когда я пытаюсь использовать vuejs3 с laravel

 Vue warn]: Component is missing template or render function. 
  at <App>
 

Я начал новый проект laravel 8 с vuejs 3 , и снова та же проблема, я не знаю, как с ней справиться. Вот некоторые из моих конфигурационных файлов.

приложение.ts

 
require('./bootstrap');


import { createApp } from "vue";
import Welcome from "./components/Welcome.vue";

const app = createApp({
    components: {
        Welcome,
    },
}).mount("#app");
 

webpack.mix.js

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



 mix.ts("resources/js/app.ts", "public/js").vue({ version: 3 })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
 

Добро пожаловать.vue

 <template>
    <div id="app">
  Hello {{ name }} welcome to my app.
  <hr />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  
  setup() {
    const name = ref<string>("Bijaya");
    return {
      name,
    };
  },
});
</script>
 

package.json для версий

     "devDependencies": {
        "@vue/compiler-sfc": "^3.2.13",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "ts-loader": "^9.2.6",
        "typescript": "^4.4.3"
    },
    "dependencies": {
        "vue": "^3.2.13",
        "vue-loader": "^16.6.0"
    }
 

Если у вас есть какие-либо догадки , пожалуйста, скажите мне, спасибо

Я действительно не понимаю, почему, но изменение в приложении.ts это

 import { createApp } from "vue";
import Welcome from "./components/Welcome.vue";

const app = createApp({
    components: {
        Welcome,
    },
}).mount("#app");
 

к этому:

 import { createApp } from "vue";
import qrcode from './components/qrcode.vue'
createApp(qrcode).mount("#app")
 

проделал эту работу