New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript template? #263

Closed
italomaia opened this Issue Dec 14, 2016 · 88 comments

Comments

Projects
None yet
@italomaia

italomaia commented Dec 14, 2016

Any chance for an official typescript template?

@Anonyfox

This comment has been minimized.

Anonyfox commented Dec 14, 2016

This would be totally awesome. Ideally prepared with SSR from the start. My company wants to move a fairly big & critical Vue2/Vuex2 core app from ES7 to typescript and I currently try to figure out everything necessary, but there doesn't seem to be much information on google. :(

AFAIK since the typescript 2.1 release, one can totally remove Babel from the build pipelines, since TS can now compile async/await directly to ES5. ESLint can be substituted with TSLint, Vue2 already has typescript typings included, and so on. I just do not have any expertise in webpack so I just hope for anyone to step in here.

@italomaia

This comment has been minimized.

italomaia commented Dec 14, 2016

I tried stitching ts-loader and typescript to a plain webpack project, mimicking https://github.com/AbeHaruhiko/vue-webpack-typescript without avail. Some weird multi app error.

@italomaia

This comment has been minimized.

italomaia commented Dec 16, 2016

There you go, @Anonyfox https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/
The link above "almost works"

"import declarations may only appear at top level of a module"

@italomaia

This comment has been minimized.

italomaia commented Dec 16, 2016

Based on the link above; https://github.com/italomaia/blog/tree/master/ux
Not sure why, but it works! Vue2 with TS2

@coderabsolute

This comment has been minimized.

coderabsolute commented Jan 2, 2017

When the template is ready, then am also willing to switch ES6 to TS.

@lednhatkhanh

This comment has been minimized.

lednhatkhanh commented Jan 19, 2017

Hello, any news on the template?

@gofreddo

This comment has been minimized.

gofreddo commented Jan 19, 2017

Also looking for any news on the template?

@ducksoupdev

This comment has been minimized.

ducksoupdev commented Jan 24, 2017

I have created a typescript template for Vue 2.0 - https://github.com/ducksoupdev/vue-webpack-typescript

Let me know what you think?

@rorisme

This comment has been minimized.

rorisme commented Feb 11, 2017

@ducksoupdev I've been looking for something similar. It works pretty well, but I think there's place for improvements. Any plan on making it better?

@ducksoupdev

This comment has been minimized.

ducksoupdev commented Feb 11, 2017

Thanks. Yes definitely, I am new to Vue having mostly worked with Angular. I am learning lots and would like to improve the template. I would welcome any suggestions including PRs 😊

@tadejstanic

This comment has been minimized.

tadejstanic commented Feb 11, 2017

@rorisme What improvements do you have in mind?

@rorisme

This comment has been minimized.

rorisme commented Feb 17, 2017

@ducksoupdev @tadejstanic I'm also a VueJS newbie. I'm using the template for a few days now. The reloading seems not accurate, and sometimes it reloaded twice. I've already made some changes and hope to be able to send suggestions and PRs in the days coming.

Btw, thanks to @ducksoupdev for sharing!

@ducksoupdev

This comment has been minimized.

ducksoupdev commented Feb 17, 2017

@rorisme Would be keen on any suggestions or PRs. This is early days and I would like to improve the template going forward. The compilation of both the Typescript and then the webpack bundle would explain the two reload issue. I am aware of it and possible fixes, just not got around to fixing it yet!

@rorisme

This comment has been minimized.

rorisme commented Feb 18, 2017

@ducksoupdev I just made some adjustments to a fork of the template available here. Could you check it out and see if it's necessary to make a PR? I have tested scripts like npm run dev, npm run build and npm run serve.

@ducksoupdev

This comment has been minimized.

ducksoupdev commented Feb 19, 2017

@rorisme looks good, definitely worth a PR :)

@arcanewater

This comment has been minimized.

arcanewater commented Feb 22, 2017

Any plans to make this offical into generator?

@H3xx3n

This comment has been minimized.

H3xx3n commented Feb 26, 2017

I'm using the @ducksoupdev template but would love to see an official one from vue

@italomaia

This comment has been minimized.

italomaia commented Mar 27, 2017

Maybe, using flow, we could use most of what TS has that is amazing, without big changes: https://flowtype.org/en/docs/install/ Opinions?

@delaneyj

This comment has been minimized.

delaneyj commented Mar 29, 2017

@italomaia Typescript provides more than typing... async/await, class casing, etc

@italomaia

This comment has been minimized.

italomaia commented Mar 29, 2017

@delaneyj do we need all TS has to offer? Actually, what do we need? I would be happy with type casting alone.

ps: async/await, can be provided by syntax-async-functions

@delaneyj

This comment has been minimized.

delaneyj commented Mar 30, 2017

@italomaia true, but in larger projects things like interfaces, case classes, generics, enums are so much more than what can be done currently in flow.

@e2tox

This comment has been minimized.

e2tox commented Mar 31, 2017

I am the author of agent framework. I created one vue typescript template with fully functional backend written in 100% typescript.

vue init agentframework/webstack your-project

Source code: https://github.com/agentframework/webstack

@Toilal

This comment has been minimized.

Toilal commented Apr 1, 2017

I wrote Toilal/vue-webpack-template, a fork of the official webpack template that works really well with TypeScript (even if you can use it with ES6).

Main purpose of the fork is to use standard files for components (.js/.ts, .html & .css) instead of .vue single file components while keeping the magic for components Hot Module Reload.

So it has exactly the same features from official template, but it's based on vue-hot-reload-loader and vue-templates-loader instead of vue-loader. Everything from upstream will be merge in the future.

You should really try it, feel free to open issues for feedbacks or questions.

@DmacMcgreg

This comment has been minimized.

DmacMcgreg commented Apr 3, 2017

Does anyone know of any solutions with Typescript + single .vue file components + Hot Module Reload?

@Toilal

This comment has been minimized.

Toilal commented Apr 3, 2017

@DmacMcgreg Use webpack official template and <script lang="ts">

@DmacMcgreg

This comment has been minimized.

DmacMcgreg commented Apr 3, 2017

Do you have an example to use?
I'm having a heck of a time trying to get the loader integrated with Typescript and webpack.

@DmacMcgreg

This comment has been minimized.

DmacMcgreg commented Apr 3, 2017

The solution should be able to work in the same way as this vue-loader example:

image

@rizqidjamaluddin

This comment has been minimized.

rizqidjamaluddin commented Apr 12, 2017

I would also be interested in a proper typescript template.

Adding <script lang="ts"> doesn't work for as far as I tinkered with it. The official docs seem to imply it should work reasonably out of the box, plus vue-class-component for added compatibility, so I tried following similar steps as if I wanted Sass support.

I've tried:

  • Using vue-class-component's tsconfig.json as a base (this one)
  • Adding dependencies described in their example package.json
  • In webpack base configs, added '.ts' to the resolve array, attach ts-loader for .ts files; basically merging in their example webpack config

And I still get a bucketload of errors, usually along the lines of

Module build failed: Error: Could not find file: '[...]/src/components/MyComponent.vue'
[...]
 @ ./src/components/MyComponent.vue 7:2-105

Where that file is just a basic

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  message: string = 'Hello!'
  onClick (): void {
    window.alert(this.message)
  }
}
</script>

Not to mention a bunch of redeclaration errors and so forth.

I've thus far been unable to find any good examples of getting this to work using vue's built-in declarations (most articles I can find use vue-ts-loader). Since TS support is supposedly official now (given its position in the docs), I hope a proper template shows up soon.

@Coridyn

This comment has been minimized.

Coridyn commented Apr 17, 2017

@rizqidjamaluddin I had the same issue with a Could not find file: '[...]/src/Component.vue' error.

I was eventually able to get my project working with the following changes.

webpack.config.js

Make sure your entry is a TypeScript file and not JavaScript.

My webpack.config.js file looked like this when I was getting the error:

// webpack.config.js
module.exports = {
  entry: './src/app/main.js',   // <-- this causes problems
  output: {
    path: __dirname,
    filename: 'build.js'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          /*
          When entry is a .js file the options for this loader is ignored by vue-loader.
          
          `ts-loader` will be loaded without these settings and that's why TypeScript can't
          find the .vue files like we expect.
          */
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          esModule: true
        }
      }
    ]
  },
  devtool: 'source-map'
}

To fix it make sure your entry file is .ts:

// webpack.config.js
module.exports = {
  entry: './src/app/main.ts', // <-- entry must be a .ts file
  output: {
    path: __dirname,
    filename: 'build.js'
  },
  //...
}

references.d.ts and tsconfig.json

This fixed the Could not find file error but gave me these instead:

ERROR in /project-dir/src/app/ComponentContent.vue.ts
(15,31): error TS2307: Cannot find module './components/ComponentContent.vue'.

ERROR in ./main.ts
(1,8): error TS1192: Module '"project-dir/node_modules/vue/types/index"' has no default export.

ktsn's answer put me on the right track - make sure you have a declaration for the type emitted from .vue files

// references.d.ts
declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

2017-09-10 correction: previously the above snippet used export default typeof Vue. This was incorrect and should be export default Vue as shown in the TypeScript Vue Starter.

Using typeof ended up giving me errors like this when I moved to newer versions of TypeScript:

error TS2345: Argument of type '...' is not assignable to parameter of type 'AsyncComponent'.
  Object literal may only specify known properties, and 'name' does not exist in type 'AsyncComponent'.

Also make sure your TypeScript config has "allowSyntheticDefaultImports": true - without this TypeScript still complains about the vue modules missing default exports.

// tsconfig.json
{
    "exclude": [
        "node_modules"
    ],
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,	// <-- This is needed (based on settings from `vue-class-component` example tsconfig.json)
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    }
}

After that everything compiled and ran as expected.

I'd recommend check your module, moduleResolution and target settings too - having different values there caused me problems (unfortunately I can't remember what errors I was getting when I was playing with them, sorry).

(As a note to myself later, this was my solution when running into this issue: vuejs/vue-loader#109)

@hmexx

This comment has been minimized.

hmexx commented Nov 24, 2017

prograhammer. Not sure if it's helpful but I posted a fully working starter kit earlier in this thread, that does webpack, typescript within .vue files, vuex, vuerouter, etc.

https://github.com/hmexx/vue_typescript_starter_kit

@Jack85

This comment has been minimized.

Jack85 commented Dec 10, 2017

its sad that takes ages to bring official ts template when comunity is already using it

@LinusBorg

This comment has been minimized.

Member

LinusBorg commented Dec 10, 2017

Well, the community is already using it, that's great. Someone already seems to maintain it, that's great. That's what open source is about, rifht?
I applaud the people investing their time, like we do ours.

I'm thankful that people stepped up to fill a void we lately weren't able to fill with our limited resources.

But "sad"? Sorry you feel that way, but I don't think we owe you anything.

Please don't waste your time complaining about stuff like this and do something valuable with it instead.

Thank you.

@Jack85

This comment has been minimized.

Jack85 commented Dec 10, 2017

I have several repositories with typescript so as few guys here, i think it would be superb so that you guys select someone who is willing and able to maintain it and put it in cli. So that there is official support and anyone could see - hey those vuers they have bunch of most recent languages and templates prepared, the community is great, with great support. Creating something that everybody is happy about. Thank you that you keep us motivated.

@omidkrad

This comment has been minimized.

omidkrad commented Dec 11, 2017

Here's my suggestion. I think instead of creating a separate webpack-typescript template it's better to add typescript support to the existing webpack template and have the CLI tool to optionally include it. TypeScript can totally replace Babel, but they can also co-exist if that makes things easier for maintaining the template. If possible, externalize all parts of the build scripts that add TS support in a separate file. It only needs to allow .ts files in addition to .js files and allow lang="ts" in .vue files (use js by default). If anyone doesn't want to use TypeScript they simply write in JS (in config.json set allowJs: true). This I think gives us the best of both words and addresses needs of both sides. So if you agree, please make pull requests to vuejs-templates/webpack.

@Toilal

This comment has been minimized.

Toilal commented Dec 11, 2017

I maintain a webpack template fork adding TypeScript and vue-class-component here, provided by some additional options to the official webpack template.

Having typescript as an option in the official webpack template is definitively the way to go, and would not require that much work. It's possible to use the metalsmith option in meta.js to rename all *.js files to *.ts when typescript option is choosen to avoid duplicating files only to add types.

@omidkrad

This comment has been minimized.

omidkrad commented Dec 11, 2017

Hi @Toilal, this is great, but that change is still too big for a merge. I'm not a VueJS moderator, but I think you can do few things if you want it to be considered as pull request:

  • Make sure you are rebased on the latest from the original webpack template.
  • The changes that come in PL should be exclusively for adding TS, so remove any improvements that are not directly related (even converting functions to lambdas or changing var to const, etc). If you want you can send them as separate PL.
  • To keep the diffs minimal, I would only use .ts for the entry point which is main.ts and leave everything else as .js. Maybe can use .ts for other files in later PLs.
  • If TS support can be externalized into a separate build file, that would help a lot in maintaining the template.

For now I think the important thing is to get the most minimal TS support accepted into the official webpack template, and we can make it better from there.

@Toilal

This comment has been minimized.

Toilal commented Dec 13, 2017

For everybody who needs a TypeScript or a Library template, you should try again https://github.com/Toilal/vue-webpack-template. It's merged with current develop branch of webpack template, and now brings 3 new questions on top of it:

  1. Project Type : App/Library. (When you choose Library, sources are splitted in 2 folders, src for the library and app for the demo/docs app.
  2. Which language do you want to use? TypeScript (ts-loader + babel)/ES2015 (babel)
  3. Use Class-Style Components (vue-class-component + vue-property-decorators)? Y/N

The template currently use dummy Single File Components with src attributes poiting to external html/css/ts/js files because TSLint doesn't support checking vue files, but I consider adding an option to really use Single File Components like in the official webpack template. For now, It's still possible to manually copy/paste the html/css/ts/js files into vue files.

For people who tested this fork months ago, It's now really closer to the official webpack template (it use vue-loader).

@AccessViolator

This comment has been minimized.

AccessViolator commented Jan 6, 2018

if it's possible to get rid of babel when using typescript, that would be a "cleaner" implementation

@Toilal

This comment has been minimized.

Toilal commented Jan 6, 2018

@AccessViolator I'm not sure it's a so good idea.

Babel is great at providing polyfills and other features, so in many case it's better to make TypeScript target es6, and still use babel on TypeScript output to ensure older browser compatibility.

@Skwai

This comment has been minimized.

Skwai commented Jan 17, 2018

Babel is great at providing polyfills and other features, so in many case it's better to make TypeScript target es6, and still use babel on TypeScript output to ensure older browser compatibility.

Couldn't you just target ES5 in tsconfig and import babel-polyfill into main.js if you use ES6 features and want to support older browsers?

Maybe I'm oversimplifying things, but I've setup a few of my own typescript projects and ended up ditching babel transpilation as I saw no need to keep it assuming all your code is typescript.

@Skwai

This comment has been minimized.

Skwai commented Jan 17, 2018

I also feel that whatever implementation is merged should (probably) use the vue-property-decorator library and scaffold the hello world example using decorators and class syntax as a good boilerplate for the project to start with.

@dbettin

This comment has been minimized.

dbettin commented Jan 18, 2018

@Skwai Do you know if this is easy to add after installing this template?

Could I just install vue-property-decorator and start using it?

@Skwai

This comment has been minimized.

Skwai commented Jan 23, 2018

@dbettin Worked for me as far as I can remember. Also installed vuex-class

@ericop

This comment has been minimized.

ericop commented Feb 5, 2018

@yyx990803 is having a TypeScript Template out of scope for the foreseeable future of Vue, or is there something cool about to drop from Vue CLI that will be an official solution for this?

Tons of use were enthralled after your 2.5 update blog, but when it came time to build a project we realized the great comfort of having the cli (and a template) to guide us along the way.

@Jack85

This comment has been minimized.

Jack85 commented Feb 5, 2018

Thank you to the team and integrating typescript template in vue cli v3!

@yyx990803

This comment has been minimized.

Member

yyx990803 commented Feb 5, 2018

@ericop it's already supported in 3.0.

@ericop

This comment has been minimized.

ericop commented Feb 5, 2018

@yyx990803 Awesome, thanks!

@ThePlastic

This comment has been minimized.

ThePlastic commented Feb 5, 2018

I tried v 3.0 and it gives you a lot of usefull option (first of all you can choose typescript and css preprocessors). Does this eliminate the need to use webpack? And if not, when this template will be available on webpack??

@rigor789

This comment has been minimized.

Contributor

rigor789 commented Feb 5, 2018

@ThePlastic 3.0 is built around webpack, but it is abstracted away to keep it simple for the end-user. But you can configure it if you need to.

@ThePlastic

This comment has been minimized.

ThePlastic commented Feb 5, 2018

@rigor789 That's the definition of cool

@teslor

This comment has been minimized.

teslor commented Feb 21, 2018

How to setup a project using typescript template in vue-cli 3.0? I see there is cli-plugin-typescript but how to use it to init a new project?

@fwchen

This comment has been minimized.

fwchen commented Mar 5, 2018

@teslor
vue create foo
and
select the "Manually select features"

@bromne

This comment has been minimized.

bromne commented Mar 8, 2018

Is there any way to change configuration corresponding to config/index.js in v2 (for example assetsSubDirectory) at a project created by v3?

@kronok

This comment has been minimized.

kronok commented May 1, 2018

@rigor789 It's abstracted away, but how would we customize the webpack configuration if we needed to?

@rigor789

This comment has been minimized.

Contributor

rigor789 commented May 1, 2018

@kronok it's all written in the docs here: https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment