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

Question

I attempt use this library for my Nuxt project: getting-started

I tried do how to written in docs, but in all variants get an error for exmaple: 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. Please help me correctly plug this library.

Answer 1

I have had the same problem with vue-touch and I tackled it by adding it as a plugin as suggested by Nuxtjs.Org

Workflow

• Create a folder on the main directory 'plugins'
• Create a .js file under like 'plugins/the-external-component-you-want-to-add.js' for may case 'plugins/vue-notifications.js'

• 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

  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>
  

Documentation

For more information you could take a look in nuxtjs.org documentation.