I am attempting to use a library for my Nuxt project, following the guidelines laid out in the documentation available here: getting-started
Despite following the instructions provided, I keep encountering errors such as "Unknown custom element: - did you register the component correctly?" with every attempt.
When implementing recursive components, I made sure to include the necessary "name" option. Here is an example of what I have tried:
<template>
<div class="div-wrapper">
<h1>grge</h1>
<div id="typeahead"><typeahead :data="USstate" placeholder="USA states">
</typeahead></div>
</div>
</template>
<style lang="less">
.div-wrapper {
background: #f4f4f4;
padding: 95px 15px 50px 15px;
}
</style>
<script>
import Vue from 'vue';
export default {
data() {
return {
USstate: ['Alabama', 'Alaska', 'Arizona'],
asyncTemplate: '{{ item.formatted_address }}',
githubTemplate: '<img width="18px" height="18px" :src="item.avatar_url"> <span>{{item.login}}</span>'
}
},
mounted(){
var typeahead = require('vue-strap/src/Typeahead');
Vue.component('typeahead',typeahead);
new Vue({
el: 'typeahead'
})
},
methods: {
googleCallback(items, targetVM) {
const that = targetVM;
that.reset()
that.value = items.formatted_address
},
githubCallback(items) {
window.open(items.html_url, '_blank')
}
}
}
</script>
Upon implementation, I encountered an error stating "window is undefined." In an attempt to resolve this, I revised the code as follows:
mounted(){
var typeahead = require('vue-strap/src/Typeahead');
Vue.component('typeahead',typeahead);
new Vue({
el: 'typeahead'
})
}
Although it rendered successfully, several errors persisted:
I also attempted to integrate the library as a plugin, as described on ru.nuxtjs.org/examples/plugins, but without success. I would greatly appreciate any assistance in properly incorporating this library.