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

时间:2017-01-20 10:46:21

标签: javascript vue.js nuxt.js

我尝试将此库用于我的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'
        })
    }

渲染但有很多错误: error image

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

1 个答案:

答案 0 :(得分:7)

我遇到了与vue-touch相同的问题,我通过将其添加为Nuxtjs.Org建议的插件来解决它

工作流

  • 在主目录'plugins'上创建一个文件夹
  • 在类似'plugins / the-external-component-you-want-to-add.js'下创建一个.js文件,用于可能的案例'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