4

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 example: 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: error image

And tried write as plugin how to described in ru.nuxtjs.org/examples/plugins but unsuccessfully. Please help me correctly plug this library.

0

1 Answer 1

14

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.