我不能在Nuxt.js/vue.js中使用第三方组件

Question

我尝试在我的Nuxt项目中使用这个库：开始-开始

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

对于递归组件，请确保提供"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>

获取错误:窗口未定义。比我试试看：

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

呈现但有许多错误：

​

并尝试编写插件，如何在ru.nuxtjs.org/示例/plugins中进行描述，但没有成功。请帮我正确地插入这个图书馆。

Answer 1

我在vue-touch上也遇到了同样的问题，我按照Nuxtjs.Org的建议将它作为插件添加到插件中来解决这个问题。

工作流程

• 在主目录“plugins”上创建一个文件夹
• 在类似于'plugins/the-external-component-you-want-to-add.js‘的.js文件下创建一个.js文件，用于可能的“plugins/vue-.js..js”
• 根据您的需要修改下面的代码。 从' Vue‘导入VueTouch，从'vue-touch’导入vue 客户端和服务器端的使用 Vue.use(VueTouch，{name：'v-touch'}) 如果只需要插件，则客户端 if (process.BROWSER_BUILD) { Vue.use(VueTouch，{name：'v-touch'}) } 然后是一根漂亮的原木 Console.log(插件v-触摸被锁定并加载)
• 通过编辑nuxt.config.js将插件注入webpack工作流 插件：'~plugins/vue-touch'，构建：{.}
• 然后，您可以使用它，因为您在您的插件文件命名。 SWIIIIIIPE

文档

有关更多信息，您可以在nuxtjs.org 文档中查看。