Recently diving into the world of Vue, I was able to successfully create a sample app using gulp, vueify, and TypeScript. To showcase what's happening and shed light on an issue I'm facing, here are snippets of the key code segments:
Menu.ts
import Vue from 'vue'
import Menu from './menucomponent.vue'
new Menu().$mount('#menu');
MenuComponent.ts
import { Vue } from 'vue-property-decorator'
import Component from 'vue-class-component'
import TestComponent from './test.vue'
@Component({
components: {
TestComponent
}
})
export default class Menu extends Vue {}
MenuComponent.vue
<template>
<div class="container menu">
<TestComponent/>
</div>
</template>
<script lang="ts" src="./menucomponent.ts"></script>
Test.vue
<template>
<h1>hi</h1>
</template>
<script lang="ts">
import { Component,Vue } from 'vue-property-decorator'
@Component({
})
export default class test extends Vue{}
</script>
Gulp method for compiling TypeScript and Vue files
gulp.task('compile-vue', function () {
var paths = {
browserifyEntries: [
'menu.ts'
],
dependencies: ['']
};
var tasks = paths.browserifyEntries.map(function (entry) {
console.log('Compiling ' + entry);
return browserify({ entries: ["ScriptsSrc/vue/" + entry] })
.external(paths.dependencies)
.plugin(tsify)
.transform(vueify)
.transform(babelify, { presets: ["es2015"], extensions: [".tsx", ".ts"] })
.bundle().on('error', swallowError)
.pipe(source(entry))
.pipe(rename({
extname: '.js'
}))
.pipe(gulp.dest('wwwroot/scripts'));
});
return es.merge.apply(null, tasks);
});
Challenge
While everything runs smoothly in MenuComponent, when attempting to split it into components like `
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I stick with using only gulp in my build process to avoid webpack. Any insights on what could be causing this issue would be greatly appreciated.