[英]I can't use third party components in Nuxt.js/vue.js
I attempt use this library for my Nuxt project: getting-started我尝试将此库用于我的 Nuxt 项目:入门
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.并尝试将如何在 ru.nuxtjs.org/examples/plugins 中描述为插件但未成功。 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我在 vue-touch 上遇到了同样的问题,我按照 Nuxtjs.Org 的建议将它添加为插件来解决它
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通过编辑 nuxt.config.js 将您的插件注入 webpack 工作流程
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>
For more information you could take a look in nuxtjs.org documentation .有关更多信息,您可以查看 nuxtjs.org文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.