@Wsearch

Почему не выводятся Vue компоненты?

Vue отказывается отрисовывать компонент. Причем любой. Заново все пересобирал, поставил уже пустые компоненты, все равно ошибка:

[Vue warn]: Failed to resolve component: имя компонента
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>

app.js:

import './bootstrap';
import { createApp } from 'vue';
import tyt from "./components/tyt.vue";
import store from './store';


const app = createApp({
    components:{
        tyt
    }
});

app.use(store);

app.mount('#app');

в компоненте:

<template>
<div>
    vfdf
</div>
</template>

<script>
    export default {
        name: "tyt"
    }
</script>

в шаблоне:

<section style="padding-top: 7rem;" id="app">
            <tyt></tyt>
            rt
        </section>

сам app.js подключаю через vite:

@vite([
'resources/js/app.js',

])
  • Вопрос задан
  • 3816 просмотров
Решения вопроса 1
Starina_js
@Starina_js
full-stack web dev
Это вот стандартный конфиг vite под vue

vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})


main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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


App.vue
<template>
  <div>
    Hi
  </div>
</template>


index.html
<div id="app"></div>

Вы случайно не с Laravel заводите? Пример
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['md-linedivider'].includes(tag),
        }
      }
    })
  ]
})


Подробнее в доках
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы