我无法在 Nuxt.js/vue.js 中使用第三方组件

Question

我尝试将这个库用于我的 Nuxt 项目： getting-started

我试过如何在文档中编写，但在所有变体中都会出现错误，例如：未知的自定义元素：- 您是否正确注册了组件？

对于递归组件，请确保提供 "name" 选项。我尝试了什么：

<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>

获取错误：window 未定义。比我试试这个：

mounted(){
        var typeahead = require('vue-strap/src/Typeahead');
        Vue.component('typeahead',typeahead);
        new Vue({
            el: 'typeahead'
        })
    }

呈现但有很多错误：

并尝试将 ru.nuxtjs 中描述的方式编写为插件。org/examples/plugins 但没有成功。请帮我正确插入这个库。

Answer 1

我在使用 vue-touch 时遇到了同样的问题，我按照 Nuxtjs.Org

的建议将其添加为插件来解决它

工作流程

在主目录创建一个文件夹'plugins'
为可能的情况 'plugins/vue-notifications.js'

根据您的需要修改下面的代码。

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。

我无法在 Nuxt.js/vue.js 中使用第三方组件

I can't use third party components in Nuxt.js/vue.js

javascript

vue.js

nuxt.js

工作流程

文档