我尝试将此库用于我的Nuxt项目: getting-started
我尝试过如何用docs编写,但在所有变种中都会出现错误:unknown自定义元素: - 你是否正确注册了组件?对于递归组件,请确保提供“名称”选项。 我尝试了什么:
<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>
获取错误:窗口未定义。 比我试试这个:
mounted(){
var typeahead = require('vue-strap/src/Typeahead');
Vue.component('typeahead',typeahead);
new Vue({
el: 'typeahead'
})
}
渲染但有很多错误:
并尝试编写插件如何在ru.nuxtjs.org/examples/plugins中描述 但没有成功。 请帮我正确插入这个库。
答案 0 :(得分:7)
我遇到了与vue-touch相同的问题,我通过将其添加为Nuxtjs.Org建议的插件来解决它
根据您的需要修改下面的代码。
import Vue from 'vue'
import VueTouch from 'vue-touch'
客户端和服务器端使用
Vue.use(VueTouch, {name: 'v-touch'})
如果只需要客户端插件
if (process.BROWSER_BUILD) {
Vue.use(VueTouch, {name: 'v-touch'})
}
然后一个不错的日志
console.log('plugin v-touch is locked and loaded')
通过编辑nuxt.config.js
将插件注入webpack工作流程plugins: ['~plugins/vue-touch'],
build: {
...
}
然后您可以在插件文件中使用它。
<v-touch @swipe="onswipeleft" class="dragme">SWIIIIIIPE</v-touch>
有关更多信息,请查看nuxtjs.org documentation。