我不能在 Nuxt.js/vue.js 中使用第三方组件 [英] I can't use third party components in Nuxt.js/vue.js
问题描述
我尝试将这个库用于我的 Nuxt 项目:.
I attempt use this library for my Nuxt project: getting-started
I tried do how to written in docs, but in all variants get an error for example: Unknown custom element: - did you register the component correctly?
For recursive components, make sure to provide the "name" option. what I 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>
get error: window is undefined. than i try this:
mounted(){
var typeahead = require('vue-strap/src/Typeahead');
Vue.component('typeahead',typeahead);
new Vue({
el: 'typeahead'
})
}
render but have many errors:
And tried write as plugin how to described in ru.nuxtjs.org/examples/plugins but unsuccessfully. Please help me correctly plug this library.
I have had the same problem with vue-touch and I tackled it by adding it as a plugin as suggested by Nuxtjs.Org
Workflow
- Create a folder on the main directory 'plugins'
- Create a .js file under like 'plugins/the-external-component-you-want-to-add.js' for may case 'plugins/vue-notifications.js'
Modify the code below, according to your needs.
import Vue from 'vue' import VueTouch from 'vue-touch'
Both client and server side usage
Vue.use(VueTouch, {name: 'v-touch'})
If the plugin is needed client side only
if (process.BROWSER_BUILD) { Vue.use(VueTouch, {name: 'v-touch'}) }
Then a nice log
console.log('plugin v-touch is locked and loaded')
Inject your plugin to the webpack workflow by editing nuxt.config.js
plugins: ['~plugins/vue-touch'], build: { ... }
then you could use it as you named in your plugin file.
<v-touch @swipe="onswipeleft" class="dragme">SWIIIIIIPE</v-touch>
Documentation
For more information you could take a look in nuxtjs.org documentation.
这篇关于我不能在 Nuxt.js/vue.js 中使用第三方组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!