i've got this error in my console
Uncaught SyntaxError: The requested module './components/tileHeader/controller.js' does not provide an export named 'tileHeader'
this is my code components/tileHeader/controller.js:
Vue.component('tileHeader',{
template: '#tileHeader',
data(){
return{
count:0
}
},
})
components/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>
main.js:
import Vue from './vue.js';
import { tileHeader } from './components/tileHeader/controller.js';
new Vue({
el: '#app',
components: {
'tileHeader': tileHeader
},
})
index.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>
i'm working with x-templates. this is my project structure: structure
Could you try something like this ?
Create a single file that will contain your html / css and js.
tileHeader.vue :
<template>
<!-- Your view.html -->
</template>
<script>
export default {
name: 'tileHeader',
}
</script>
<style scoped>
</style>
Since the file has a export default, you'll be able to import it in another file
Add to main.js :
import tileHeader from "./components/tileHeader.vue";