tengo este error en mi consola
Error de sintaxis no detectado: el módulo solicitado './components/tileHeader/controller.js' no proporciona una exportación denominada 'tileHeader'
este es mi código components/tileHeader/controller.js:
Vue.component('tileHeader',{ template: '#tileHeader', data(){ return{ count:0 } }, })componentes/tileHeader/view.html:
<script type="text/x-template" id="tileHeader"> <div class="container"> <div class="row"> <div class="col"> <!--<div v-show="item.label != null || item.label == undefined" class="label">{{item.label}}</div> <img v-show="item.image != null" src="item.image"/>--> <p>This is a Test</p> </div> </div> </div> </script>principal.js:
import Vue from './vue.js'; import { tileHeader } from './components/tileHeader/controller.js'; new Vue({ el: '#app', components: { 'tileHeader': tileHeader }, })índice.html:
<!DOCTYPE html> <html> <head> <title>Vue X-Templates</title> </head> <body> <div id="#app"></div> <script type="module" src="main.js"></script> </body> </html>Estoy trabajando con x-templates. esta es la estructura de mi proyecto: estructura
¿Podrías intentar algo como esto?
Cree un único archivo que contendrá su html/css y js.
tileHeader.vue:
<template> <!-- Your view.html --> </template> <script> export default { name: 'tileHeader', } </script> <style scoped> </style>Dado que el archivo tiene un valor predeterminado de exportación, podrá importarlo en otro archivo
Agregar a main.js:
import tileHeader from "./components/tileHeader.vue";