can we create real single component vue file?

[lzl124631x]

The project created by this template creates a vue file like this:

<template src=./HelloWorld.html></template>
<style scoped src=./HelloWorld.css></style>
<script lang="ts" src="./HelloWorld.ts"></script>

This means I have to create 4 files for each module? Can we achieve the following in .vue?

<script lang="typescript>
</script>

[Toilal]

I plan to add an option to generate real .vue files with embedded resources like in official webpack template. For now, you can still manually copy/paste external resource files (html/css/ts) generated by the template into the .vue file.

Actually, you will have 2 drawbacks if you include typescript into .vue files (that's the reason this template still use external files) :

• TypeScript code won't be linted by TSLint.
• TypeScript will compile without any type checking.

There's currently a PR that will bring those features, but it's still not merged and not released. Actually it seems to work if you build this dependency manually

For now, in my projects I use embedded html and css into .vue files, but I keep script in an external file to have TS Type Checking and TSLint working properly.

But I hope one day, all will work smoothly with Vue Single File components and TypeScript :).

[lzl124631x]

Thanks for your reply @Toilal! I hope that too! One day those issues will be conquered.

FYI, this PR seems to be working on this. I'm not sure if the change still have the 2 drawbacks you mentioned.

[Toilal]

Which tag do you want to externalize as standalone file from Single File Components ?
❯◯ <script>
 ◯ <style>
 ◯ <template>?

It's implemented in #58, will be soon available in develop branch. It includes the released PR from https://github.com/Realytics/fork-ts-checker-webpack-plugin, so TypeScript script are now TypeChecked and linted right inside .vue files !

[Toilal]

5c4baaf