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

Question

我嘗試將此庫用於我的 Nuxt 項目：入門

我試過如何在文檔中編寫，但在所有變體中都會出現錯誤，例如：未知的自定義元素：-您是否正確注冊了組件？

對於遞歸組件，請確保提供“名稱”選項。 我試過的：

<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 中描述為插件但未成功。 請幫我正確插入這個庫。

Answer 1

我在 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文檔。