1

I'm trying to use vue-instant component as a child component. I'm not sure how to add components without definition, or maybe my issue is in the webpack config ignoring node_modules because of the lack of type? Here's what I have:

SingleUserSearch.vue (my custom component):

<template>

    <div class="input-group">         

       <vue-instant 
       v-model="value"            
       @input="changed"            
       :suggestions="suggestions" 
       name="customName" 
       placeholder="custom placeholder" 
       type="google"></vue-instant>

    </div>

</template>

<script lang="ts">       

    import Vue from "vue";
    import Component from "vue-class-component";
    import axios from "axios";
    import VueInstant from 'vue-instant'   

    let vueInstantComponent : Vue.Component = VueInstant;

    @Component({
        components: {
            'vue-instant': vueInstantComponent
        }       

    })
    export default class SingleUserSearch extends Vue {

        value:string="";
        suggestions : Array<string> = []
        async changed() {
            var that = this
            this.suggestions = []
            let response = await axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value);                   
            alert(response);                           
        }
    }
</script>

Then I compile my code using webpack without difficulties. When I try to test the code on page I get:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> at scripts\vue\components\SingleUserSearch.vue

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './scripts/vue/main.ts',
    output: {
        path: path.resolve('./scripts/build/'),
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader?' + JSON.stringify({
                    transpileOnly: true
                })
            },
            {
                test: /\.vue$/,
                loader:'vue-loader'  
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015','stage-0','stage-1','stage-2','stage-3']
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue': path.resolve('./node_modules/vue/dist/vue.esm.js')
        }
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
};

1 Answer 1

1
+50

The issue isn't that they types are missing. Unless you're using TypeScript in strict mode, anything without types is imported as any.

The issue is that VueImport's default export is a plugin object, so when you import VueInstant from 'vue-instant' you're not actually importing the component.

Just console.log(VueInstant) and you'll see what I mean.

Instead of using the default import, you'll need to either specify what you would like to import by using ES6 destructuring:

import { VueInstant } from 'vue-instant'
VueInstant 

Alternatively you can import all the exported modules under an alias, and then call the class from there:

import * as VueInstant from 'vue-instant'
VueInstant.VueInstant
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.