Nuxt.js: typescript support

[couac]

I installed ts-loader into my nuxt.js app like so:
npm install ts-loader typescript

Then I tell vue-loader to use ts-loader for the script part:
<script lang="ts">

What I get is an error message:
error TS18002: The 'files' list in config file 'tsconfig.json' is empty.
or
error TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["node_modules","bower _components","jspm_packages"]'.
if I create the tsconfig.json file.

How can I configure typescript inside .vue files?

_{This feature request is available on Nuxt.js community (#c97)}

[Atinux]

Hi @couac

I will take a look, but I don't have so much experience with Typescript.

[Evertt]

I was able to get this to work. These are the minimal necessary steps I needed to get this to work:

1. Install a project using vue init nuxt/starter <project-name> && cd <project-name> && yarn
2. Add typescript using yarn add --dev typescript ts-loader
3. Create an empty index.d.ts file using touch index.d.ts
4. Create a tsconfig.json file containing at least the following

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015.promise"]
  }
}

1. And finally add the following to your nuxt.config.js

build: {
  extend (config) {
    for (rule of config.module.rules) {
      if (rule.loader === 'vue-loader') {
        rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"]}'
      }
    }
  }
}

[husayt]

Sounds cool. How does your vue file looks now. It would br great to make a
simple demo and add it to nuxt examples.

On 6 Feb 2017 20:06, "Evert van Brussel" [e-mail] wrote:

I was able to get this to work. These are the minimal necessary steps I
needed to get this to work:

1. Install a project using vue init nuxt/starter && cd
   && yarn
2. Add typescript using yarn add --dev typescript ts-loader
3. Create an empty index.d.ts file using touch index.d.ts
4. Create a tsconfig.json file containing at least the following

{
"compilerOptions": {
"lib": ["dom", "es5", "es2015.promise"]
}
}

1. And finally add the following to your nuxt.config.js

build: {
extend (config) {
for (rule of config.module.rules) {
if (rule.loader === 'vue-loader') {
rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\.vue$"]}'
}
}
}
}

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/121#issuecomment-277797130, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABHXrIev1X_OEULigbfyE5F7p_ck1Y5qks5rZ30ngaJpZM4Lgph8
.

[Evertt]

My vue-files look normal except that the <script> tag now has <script lang="ts">.

Now I'm just trying to get class decorators to work, but I'm not managing yet. :-(

edit oh I see, the class decorators of my favorite library don't work at the moment, because they expect this to be accessible from the data() {} option, which it isn't in Nuxt.js.

[HerringtonDarkholme]

May I ask why nuxt.js transmutes data option? If a beefy data is desirable, why not just add a new asyncData option? Like the offical. Though deprecated, it still illustrates insightful plugin to reinforce Vue without compromise of compatibility.

[Atinux]

@HerringtonDarkholme nuxt.js overwrite data only for pages components and I'm sorry but I will not change this behaviour, it adds a lot more readability for a few incompatibilities.

Maybe av-ts could be compatible with nuxt.js?

[HerringtonDarkholme]

I know it only change page components. It does not change the nature of incompatibility. A new option field can be only available to pages component, too.

An incompatible data means caveats on documentation and migration issues. A newcomer might first complain about nuxt.js when migrating component before he/she reads the relevant part in documentation. It also creates new coding rule for component authors.

I would suggest a name like pre. It is even conciser than data, and captures the data fetching mechanism:

it is called every time before loading the component (only for pages components).

It essentially means a component pre-processes the context or executes pre-routing logic.
It also introduces new chance for client to implement new plugin to handle the pre option. Nothing to break here.

Maybe av-ts could be compatible with nuxt.js?

Yes, I have supported this behavior in new release. But other library authors probably need pay heed to nuxt. Fairly, saving several keystorkes does harm to the ecosystem.

Why does it have some much potential pitfall? Vue's superior flexibility does not mean arbitrary modification is benign. Indeed, open/close principle is still a good design.

[Austio]

@atinux would you be open to a PR from community member implementing data method as something like asyncData or pre? Nuxt is incredible and doing this before 1.0 may make it easier long term to keep in step with Vue.

[alexchopin]

@Austio Of course you can create a PR for implementing data method as asyncData.
@Atinux and I are always happy to see more contributions from the community.

[John0x]

Is there a way to use typescript for middleware and such?
It seems like nuxt tries to load the js file by its extension, since it simply ignores my .ts files which are inisde middleware folder.

[Atinux]

The 0.10 release it out ✋

[John0x]

@Atinux can we please reopen this?
Having the following code:
````typescript
import Vue from "vue";
import Component from "vue-class-component";

@Component({})
export default class AboutComponent extends Vue {
asyncData({req}) {
console.log("AsyncData called");
return {
name: 'server'
}
}

head() {
return {
title: About Page (-side)
}
}
}
````

results in this error:
Uncaught (in promise) TypeError: Cannot read property 'props' of undefined at AboutComponent.Component._init (eval at 253 (1.nuxt.bundle.c2ab32d….js:29), <anonymous>:32:24) at AboutComponent.Vue$2 (eval at <anonymous> (vendor.bundle.f244d75….js:6), <anonymous>:3844:8) at new AboutComponent (eval at 251 (1.bb94064….hot-update.js:7), <anonymous>:26:42) at collectDataFromConstructor (eval at 253 (1.nuxt.bundle.c2ab32d….js:29), <anonymous>:48:16) at Object.data (eval at 253 (1.nuxt.bundle.c2ab32d….js:29), <anonymous>:104:20) at eval (eval at <anonymous> (nuxt.bundle.81d064e….js:239), <anonymous>:165:38)

[John0x]

Does anyone else have the same problem with components and asyncData?

[johnlindquist]

@John0x I can reproduce with even less:

<template>
  <section class="container">
    hello
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component({})
export default class IndexPage extends Vue {

}
</script>

Did you ever figure it out?

[Atinux]

I am working on it to find an elegant solution :)

[Atinux]

@John0x coming in the next release, compatible with vue-class-component :+1:

See the example (not working with actual version of course): https://github.com/nuxt/nuxt.js/tree/master/examples/vue-class-component

[Atinux]

Nuxt 0.10.6 is out which supports vue-class-component!

[amcsi]

Amazing!

Would someone please create a version of this starter with typescript and vue-class-component already working?

[sebastianmacias]

Amazing!

Would someone please create a version of this starter with typescript and vue-class-component already working?

as well as vuex would be very helpful

[johnlindquist]

I'll work on a starter repo, still verifying everything is working.

Here's an in-progress repo:
https://github.com/johnlindquist/nuxt-typescript

It's using asyncData and vuex.

Pay special attention to:

The ts-loader modification:
https://github.com/johnlindquist/nuxt-typescript/blob/master/nuxt.config.js#L39

The tsconfig.json path aliases:
https://github.com/johnlindquist/nuxt-typescript/blob/master/tsconfig.json#L19

Credit for the nuxt-class-component goes to the current babel example in this repo.

[johnlindquist]

I can't sort out this issue:
https://github.com/johnlindquist/nuxt-typescript-starter/issues/1

I assume something with Nuxt's webpack config is conflicting with vue/ts-loader..., but I spent a couple hours on it with no progress.

I would love some help.

[robsontenorio]

@johnlindquist

Considering i`m using your typescript template... wont work :(

methods: {
  async fetchSomething() {
    const ip = await this.$axios.$get('http://icanhazip.com')
    this.ip = ip
  }
}

--> this.$axios.

[Atinux]

A module will be created (@nuxtjs/typescript), in the meantime, we plan to include it inside create-nuxt-app

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.