How to structure Vue (TypeScript) components?

[rmartins90]

How are you using this plugin? I'm currently using this on a .ts file, my components directory are composed by:

• .ts file for vue-class-component specification;
• .html file for template - using require('./') on .ts file;
• .scss file for stylesheet - using css-modules to import them on .ts file;

I couldn't figure out how to use this on a .vue single file. What are the other options here?

Thanks

[Grafikart]

I don't think this would be possible, if you use this decorator you don't need to have a single file anymore (you can include html / css using import or require).
I'm currently creating a loader to enable Hot Module Reload for typescript file using this decorator.

[ktsn]

You can use class component in .vue file with TypeScript. Just export a decorated class.
I'll update the docs and example in this repo to use single file component since the most people seem to think that we cannot use vue-class-component in .vue file.

[HerringtonDarkholme]

For now you can read this guide, the basic directory layout and webpack laoder configuration is the same (though library file is different, but that does not matter much)

[Evertt]

I've been working on this for the last few days and here's the template that I created: https://github.com/Evertt/vue-ts-template

Just download the zip, install the modules with yarn and run webpack. :-)

[Grafikart]

And i'm working on a way to enable HMR if a class is decorated by the Component Decorator

https://github.com/Grafikart/vue-ts-loader (WIP)

[HerringtonDarkholme]

@Grafikart you'll probably be interested in this repo. https://github.com/ktsn/vue-hot-reload-loader

[Evertt]

I don't understand the problem with HMR and vue in typescript style. That's one of the few things that never stopped working while I was making my vue-typescript-template.

[rmartins90]

In fact I'm enjoying the file structure that I've mentioned.

Still, despite I'm not using it, I'm convinced that single file components are the best way to organise larger applications. It would be great if there's some documentation about that.

[s-KaiNet]

@HerringtonDarkholme great article on vue2+ts2!
Limitations around

• semantic completion in single file component and
• type checking template code

made me sad. I've tried to use following approach in .vue file:

<script>
export {App} from './myapp';
</script>

where myapp is a typescript file with decorators (@Component export class App extends Vue), but it doesn't work (complains about Invalid handler for event "click": got undefined ). Do you know why?

[s-KaiNet]

It seems got it work.
MyApp.ts

@Component
export default class App extends Vue {
.....
}

app.vue

<script>
export * from './myapp';
</script>

EDIT
or may be this way even better:

<script lang="ts" src="./myapp"></script>

Now in MyApp.ts type checking and all cool stuff around TypeScript just works, because it's separate .ts file, from the other side we can utilize single-file-component and vue-class-component.

What do you think guys?

[unsafePtr]

Hi guys. I'm trying to get familiar with vue, but i have some structure questions. How you deal with templates? I like the idea of single file component, but you can obtain benefits of it when your template and css are small. How to make a separate file for template and require if it need. e.g
<template src=""></template> or in options section template: require(./)

[rmartins90]

@unsafePtr with vue-class-component I usually use template: require('./...').

[Toilal]

I have created a template to use TypeScript (or ES6) with VueJS without .vue files, using plain .ts / .css / .html files instead. It's based on webpack official template, but drops vue-loader, in favor of vue-template-loader and vue-hot-reload-loader.

Install vue-cli, and then init a project using this template:

vue init Toilal/vue-webpack-template some-app