I'm currently working on a Nuxt project that includes a component.
The component can be found in components/Boxes.vue:
<template>
<b-container>
<b-row>
<b-col v-for="box in boxes" v-bind:key="box">
<b-card
:title="box.title"
class="text-center mt-5">
<p class="card-text">
{{ box.text }}
</p>
<b-button
variant="danger"
>Find out more</b-button>
</b-card>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
name: "Boxes",
data() {
return {
}
}
}
</script>
Now, I want to use this component in my pages/index.vue file.
<template>
<div id="home">
<b-container>
<b-carousel
id="carousel1"
class="mt-2"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<b-carousel-slide img-src="./slides/slide1.jpg"></b-carousel-slide>
<b-carousel-slide img-src="./slides/slide2.jpg"></b-carousel-slide>
<b-carousel-slide img-src="./slides/slide3.jpg"></b-carousel-slide>
<b-carousel-slide img-src="./slides/slide4.jpg"></b-carousel-slide>
</b-carousel>
</b-container>
<Boxes/>
</div>
</template>
<script>
import Boxes from '@/components/Boxes.vue';
export default {
components: {
Boxes
},
data () {
return {
slide: 0,
sliding: null,
boxes: [
{
title: 'Fire Stopping',
text: 'How does it work?'
},
{
title: 'Our Services',
text: 'Full range of firestopping'
},
{
title: 'Bid Request',
text: 'Inexpensive peace of mind'
},
]
}
},
methods: {
onSlideStart (slide) {
this.sliding = true
},
onSlideEnd (slide) {
this.sliding = false
}
}
}
</script>
However, when trying to load the component in the index.vue file, it seems like it's not being imported properly.
You can see it in action here for better understanding: https://codesandbox.io/s/github/perfectimprints/precisionfirestopping.com.
Vue throws an error stating that the component is not defined, even though it's registered during rendering.