Vue-class-component: 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

[ferrx]

Someone should consider striking the issue here and making a template here https://github.com/vuejs-templates. Maybe just call it https://github.com/vuejs-templates/typescript

I would like to see a template that uses VueJS Official Companion Libraries such as vue-class-component and other libraries that get VueJS as TypeScript-compatible as possible. Additionally, I would like to see file structure recommendations and best practices. I think the same file structure from https://github.com/vuejs-templates/webpack should be used to remain in line with existing best practices put in place by vuejs-templates.

[ferrx]

I have PR'd an update to the aspnet core JavaScriptServices for their Vue template to use vue-class-component + vue-property-decorator. There is a corresponding yeoman for this template that can produce a boilerplate project. This might be helpful for people looking for templates that use this module.

https://github.com/aspnet/JavaScriptServices/pull/923

[ktsn]

I'm closing this issue because:

• This is essentially not vue-class-component's issue - general discussion of TypeScript + Vue project
• There is no actionable topic for vue-class-component.

But further discussion in forum or chat room is welcome 🙂 Thank you for your discussion!

[Grafikart]

Since this issue is reopened here is an "official" way of doing things : https://github.com/Microsoft/TypeScript-Vue-Starter/blob/master/src/components/HelloDecorator.vue

[blake-newman]

Sorry this was an accidental was not meant to reopen

[janein]

Hi @rmartins90!
We currently have a setup which uses single file components which include separate ts, html and style files. Works fine, but I figured out, that the webpack vue-loader is veeeery slow.
So we were thinking about getting rid of the .vue files and just importing the .ts files. Just like you described in your initial post.
I get it how it works with the template and stuff, but how did you add the styles to the component? And where to define if they're scoped or not?

thanks, janein

[oliviermattei]

Hi @rmartins90!
We currently have a setup which uses single file components which include separate ts, html and style files. Works fine, but I figured out, that the webpack vue-loader is veeeery slow.
So we were thinking about getting rid of the .vue files and just importing the .ts files. Just like you described in your initial post.
I get it how it works with the template and stuff, but how did you add the styles to the component? And where to define if they're scoped or not?

thanks, janein

i have the same question

[viT-1]

@janein & @oliviermattei You may not need .vue files: example repo.