webpack - Vue with Typescript - using components without definition -
i'm trying use vue-instant component child component. i'm not sure how add components without definition, or maybe issue in webpack config ignoring node_modules because of lack of type? here's 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 "vue"; import component "vue-class-component"; import axios "axios"; import vueinstant '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 = this.suggestions = [] let response = await axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value); alert(response); } } </script>
then compile code using webpack without difficulties. when try test code on page get:
[vue warn]: failed mount component: template or render function not defined.
found in
---> @ 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' };
the issue isn't types missing. unless you're using typescript in strict mode, without types imported any
.
the issue vueimport's default export plugin object, when import vueinstant 'vue-instant'
you're not importing component.
just console.log(vueinstant)
, you'll see mean.
instead of using default import, you'll need either specify import using es6 destructuring:
import { vueinstant } 'vue-instant' vueinstant
alternatively can import exported modules under alias, , call class there:
import * vueinstant 'vue-instant' vueinstant.vueinstant
Comments
Post a Comment