TypeScript Support for Nuxt 2
Home Page: https://typescript.nuxtjs.org
License: MIT License
Build and runtime support for Typescript in Nuxt 2.
Documentation: https://typescript.nuxtjs.org
Copyright (c) Nuxt.js Team
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
1.) import { Nuxt, Builder } form 'nuxt';
That's it.
Been able to import Nuxt, Builder and its definitions.
The module w/ types is not found.
https://github.com/nuxt/nuxt.js/blob/dev/packages/config/types/build.d.ts
Typescript error: nuxt.config.ts build.babel doesn't have presets in TransformOptions
export interface NuxtConfigurationBuild {
babel?: TransformOptions
}
I expected TransformOptions should have presets
const nuxtConfig: NuxtConfiguration = {
build: {
presets <====
}
}
presets which makes typescript error
Facebook sharing debugger result:
(https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Ftypescript.nuxtjs.org%2F)
Describe the bug
File extension .ts is required in nuxt.config.ts serverMiddleware
To Reproduce
Steps to reproduce the behavior:
server/middleware.ts{
serverMiddleware: [
'~/server/middleware' // without extension
]
}
node ./node_modules/\@nuxt/typescript-runtime/bin/nuxt-ts.js buildnode ./node_modules/\@nuxt/typescript-runtime/bin/nuxt-ts.js startError: Cannot find module '~/server/middleware'
Expected behavior
This should work
Describe the bug
The plugins cannot be loaded.
To Reproduce
Steps to reproduce the behavior:
yarn devExpected behavior
Plugin is loaded
Screenshots
Additional context
https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript
Run the app (npm run dev)
"Hello from client !" should be posted in the dev console, and the app should run without issues. (I had to change the file to .js because server is not defined on the process object.
One error and 2 warnings are displayed in the console (although the site displays correctly).
ReferenceError: [nuxt] Error while mounting app: exports is not defined at Module../node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=ts& (index.js:220)
vendors.app.js:2630 ./components/HelloWorld.vue?vue&type=script&lang=ts& 1:235-238"export 'default' (imported as 'mod') was not found in '-!../node_modules/babel-loader/lib/index.js??ref--3-0!../node_modules/ts-loader/index.js??ref--3-1!../node_modules/vue-loader/lib/index.js??vue-loader-options!./HelloWorld.vue?vue&type=script&lang=ts&'./pages/index.vue?vue&type=script&lang=ts& 1:230-233"export 'default' (imported as 'mod') was not found in '-!../node_modules/babel-loader/lib/index.js??ref--3-0!../node_modules/ts-loader/index.js??ref--3-1!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=ts&'```
<!--cmty--><!--cmty_prevent_hook-->
<div align="right"><sub><em>This bug report is available on <a href="https://cmty.app/nuxt">Nuxt</a> community (<a href="https://cmty.app/nuxt/nuxt.js/issues/c8873">#c8873</a>)</em></sub></div>
I'm quite new to typescript and new to nuxt also.. so I'm not creating a pull request, but just want to report an issue I'm having
during nuxtServerInit in axios, the method receive two parameters, the first one seems to be "ActionContext", but the second one every example and tutorials I've seen say that it's a "Context" type, which means :
Context in @nuxt/vue-app/types/index.d.ts
which is :
export interface Context {
...
req: Request
...I'm pointing to the "req" because It's here that I'm going to extract headers/cookie to perform authentication and it's here that I've seen the problem ..
this is not of type "Request" but of type : "IncomingMessage" ( when the context is parsed during ssr type is : @types/node/http.d.ts -> IncomingMessage ) , forcing typecasting to "fix" on my code seems weird, typescript interfaces should be right at the source, can someone more expert than me confirm that it is an issue with the source code ?
thank you,
Francesco
Describe the bug
When I have a template that is not using the class style of component, the parser complains about accessing data from either methods or computed properties. It does not complain when I convert the template to using vue-property-decorator
To Reproduce
Steps to reproduce the behavior:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'Test',
data() {
return {
str: 'Hello world'
}
},
computed: {
getStr(): string {
return this.str
}
}
})
</script>nuxt-ts devExpected behavior
I should be able to access the properties on data from either the computed or methods properties without using vue-property-decorator
Screenshots
Example:
Describe the bug
Doesn't work typescript-runtime library.
Error
ERROR setupTSConfig is not a function 11:49:03
at main (node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js:10:9)
at Object.<anonymous> (node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js:17:1)
at Module._compile (internal/modules/cjs/loader.js:736:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
at Module.load (internal/modules/cjs/loader.js:628:32)
at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
at Function.Module._load (internal/modules/cjs/loader.js:560:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
at executeUserCode (internal/bootstrap/node.js:526:15)
at startMainThreadExecution (internal/bootstrap/node.js:439:3)
To Reproduce
Steps to reproduce the behavior:
npm run buildExpected behavior
Project's build will be successfully complete.
Additional context
I looked in the library's source and I can't find out module which export setupTSConfig function.
$ yarn -v
1.17.3
$ node -v
v12.7.0I think the following steps should reproduce it.
$ check out to this PR.
$ yarn && yarn buildI executed command yarn build , it was failed.
( The actual command called is nuxt build )
I migrated as a migration guide, but the build fails.
Nuxt build error has occurred.
GitHub CI/CD logs
ERROR in ./components/helper/Offset.vue?vue&type=script&lang=ts& (./node_modules/vue-loader/lib??vue-loader-options!./components/helper/Offset.vue?vue&type=script&lang=ts&) 22:13
Module parse failed: Unexpected token (22:13)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| },
| computed: {
> classes(): any {
| return {
| "v-offset--full-width": this.fullWidth
@ ./components/helper/Offset.vue?vue&type=script&lang=ts& 1:0-121 1:137-140 1:142-260 1:142-260
@ ./components/helper/Offset.vue
@ ./node_modules/vue-loader/lib??vue-loader-options!./pages/privacy_policy/index.vue?vue&type=script&lang=ts&
@ ./pages/privacy_policy/index.vue?vue&type=script&lang=ts&
@ ./pages/privacy_policy/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./.nuxt/client.js
FATAL Nuxt build error
at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:5302:21)
at processTicksAndRejections (internal/process/task_queues.js:85:5)
at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:5252:5)
at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5590:5)
at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:95:7)
at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-command.js:2563:7)If there is something wrong, I would be happy if you could point it out.
nuxt.config.ts and move it in a folder. Example: sites/site-1/nuxt.config.ts/pages/index.vue in sites/site-1/yarn nuxt sites/site-1. This won't use the nuxt.config.ts fileyarn nuxt sites/site-1 --config-file=/Absolute/Path/To/Folder/sites/site-1/nuxt.config.ts throws: ERROR Unexpected token import 15:20:42
(function (exports, require, module, __filename, __dirname) { import {
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at loadNuxtConfig (node_modules/@nuxt/cli/dist/cli-chunk.js:2458:17)
Nuxt works with the nuxt config TypeScript file
Throws an error
I'm using express + nuxt with full stack Typescript.
In tsconfig.json I must set compilerOptions -> module to "commonjs" , In this case express will working properly, but not fit for nuxt.
Before nuxt < 2.8.x, I will override ts-loader options in nuxt.config.ts build.loaders.ts.compilerOptions or build.loaders.ts.configFile to use different typescript rules.
But now I migrated Nuxt from 2.8.x to 2.9.x, follow https://typescript.nuxtjs.org/migration.html instruction, As mentioned previously way is not working anymore (because typescript-build is way behind default settings?).
So I checked that typescript-build module, no any options can pass to ts-loader.
This is my modify version:
ex.
nuxt.config.ts
typescript: {
typeCheck: true,
loaderOptions: {
compileOptions: {
target: "esnext",
module: "commonjs"
}
}
},ex.
typescript-build/lib/module.js
config.module.rules.push(...['ts', 'tsx'].map(ext =>
({
test: new RegExp(`\\.${ext}$`, 'i'),
use: [
babelLoader,
{
loader: 'ts-loader',
...Object.assign({}, {
transpileOnly: true,
[`append${ext.charAt(0).toUpperCase() + ext.slice(1)}SuffixTo`]: [/\.vue$/]
}, loaderOptions)
}
]
})
))Or any better way can do?
The problem is, when we use context.app we could not use (in nuxt-i18n) the context.app.i18n, or context.app.$t.
This resolve the problem of types detection when use context.app.
We can probably use interface for that with name like AppContext.
https://codesandbox.io/s/xl0kyk4l2z
1.Rewrite pages/index.vue with nuxt-property-decorator
compile success
compile failed
Describe the bug
chunkNames in NuxtRouteConfig is a required property.
typescript/packages/types/config/router.d.ts
Lines 10 to 14 in f47ecdf
Expected behavior
It should be IMO optional as it's perfectly OK to extend routes without providing that property.
Also, as seen in nuxt source:
https://github.com/nuxt/nuxt.js/blob/2ad6bf2a080920244d9f2162a49982a272ee3e63/packages/vue-app/template/router.js#L28-L34
route can also have chunkName (singular) property which is not included in types. That should be added as optional also.
https://github.com/lars-berger/Extending-global---Nuxt-TS-issue
Clone reproduction repo & run npm run dev.
No TS compilation should be thrown.
When BREAK.ts is imported in nuxt.config.ts, ts-node throws:
Property 'someObject' does not exist on type 'Global'.
If BREAK.ts is imported in a page component, it works as it should and doesn't throw a compilation error.
https://codesandbox.io/s/5pp2yx8wx
$ npx create-nuxt-app <project-name>src directory using mkdir src.srcDir: "src/" to nuxt.config.tssrc dir.Application to start and run without errors.
Application does not run and got warning:
WARN No pages directory found in /sandbox. Using the default built-in page.
https://codesandbox.io/s/nuxt-tsconfig-issue-sample-zkx3o
yarn dev
Note that this sandbox is in the state of before first run, so tsconfig.json is a just empty file.
Nuxt will create content of tsconfig.json automatically, and dev build will continue successfully.
tsconfig.json is created with "baseUrl": "." even config.srcDir is set to src, and type check for import MyComponent from '~/components/MyComponent.vue' in src/pages/index.vue fails.
https://github.com/iwata/codesandbox-nuxt
$ git clone [email protected]:iwata/codesandbox-nuxt.git
$ yarn install
$ yarn devNo type checking errors
It shows this error:
ERROR in /Users/iwata/.go/src/github.com/iwata/codesandbox-nuxt/node_modules/@nuxt/vue-app/types/index.d.ts(73,18):
TS2430: Interface 'NuxtApp' incorrectly extends interface 'Vue'.
Types of property '$loading' are incompatible.
Property 'open' is missing in type 'NuxtLoading' but required in type '{ open: (params: LoadingConfig) => { close: () => any; }; }'.
If you import Buefy looks like plugins/buefy.ts, it declares $loading for Vue instance.
https://github.com/buefy/buefy/blob/dev/types/index.d.ts#L10
So NuxtApp extends the Vue, therefore $loading conflicts.
https://github.com/nuxt/nuxt.js/blob/v2.4.0/packages/vue-app/types/index.d.ts#L73-L74
Describe the solution you'd like
It would be great to have an official recommendation on how to have typed Vuex modules. With type-safe access to the state/getters/actions/mutations.
Describe the bug
I have set up a new Nuxt 2.9 app using nuxt/typescript 0.1.10. I have tried to use the @component decorator for .vue Pages. The typings for asyncData and other Nuxt properties aren't being picked up. I have replicated this using the minimal Component Class sandbox.
To Reproduce
Steps to reproduce the behavior:
ctx parameter of asyncData has an implicit any type
ERROR ERROR in /sandbox/pages/index.vue(12,13): nuxt:typescript 00:59:12
12:13 Parameter 'ctx' implicitly has an 'any' type.
10 | message: string = "This is a message";
11 |
> 12 | asyncData(ctx) {
| ^
13 | console.log({ ctx });
14 | }
15 | }
Expected behavior
From my understanding of the project, https://github.com/nuxt/typescript/blob/master/packages/types/app/vue.d.ts#L12 asyncData should be available as either a component option used in the @Component decorator or in the component class
https://codesandbox.io/s/codesandbox-nuxt-ddhzb
I create a tsconfig file and can use typechecking in javascript with jsdoc comments, e.g.
/**
* @type {string}
*/
let x = 2; // gives a typescript warning
it forces me to install ts-node even though the files are just javascript
Should downgrade from [email protected] to typescript@~3.5 for now, cause of broken Vue types around 3.6 (vuejs/vue#10455 ~ microsoft/TypeScript#33164)
Downgrade TypeScript to 3.5.x for now and pin to patch version only (~3.5 tilde range) to prevent the breaking changes that TypeScript minor versions bring.
Then when the type issues for Vue will be fixed through a 3.6 patch release, switch to pinned patch versions only of 3.6.x (~3.6 tilde range).
https://github.com/francoism90/nuxt-ts-edge
const users = require("./routes/users"); // Cannot find module './routes/users'
const users = require("./routes/users.ts"); // OK
Resolve .ts file
Cannot find module
I'm kinda new to Typescript, sorry if this isn't any related to nuxt.
https://github.com/SegaraRai/nuxt-ts-issue-multiregister
npm installnpm run devwork with no error
A typescript compile error occurs.
ERROR โจฏ Unable to compile TypeScript: 12:43:28
nuxt.config.ts:2:5 - error TS7022: '__importDefault' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
2 var __importDefault = (this && this.__importDefault) || function (mod) {
~~~~~~~~~~~~~~~
nuxt.config.ts:2:67 - error TS7006: Parameter 'mod' implicitly has an 'any' type.
2 var __importDefault = (this && this.__importDefault) || function (mod) {
~~~
nuxt.config.ts:5:5 - error TS7022: '__importStar' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
โฆ
The cause of this issue is that registerTsNode is called more than once.
Because of this, ts-node tries compiling already transpiled .ts code and noImplicitAny error occurs.
registerTsNode is called everytime in _startDev via detectTypeScript and getNuxtConfig.
https://github.com/Exeteres/nuxt-issue
I want to use two tsconfig.json. One for backend at the root of the project and one for nuxt in src/ui. I expected that nuxt will use rootDir option from nuxt.config.js
Nuxt created tsconfig.json at the root of the project, but uses tsconfig.json from src/ui, which does not exist.
I think I found a code fragment, which contains a bug
https://github.com/nuxt/nuxt.js/blob/e5369db2d539cf580e9ce609e895c67bc01c9b3c/packages/cli/src/command.js#L93
I think it is better to use typeRoots than types.
That's because if you use types, you have to add it to types explicitly when you add @types/xxx as your dependency.
Specifically, you should write the following in defaultTsJsonConfig:
export const defaultTsJsonConfig = {
compilerOptions: {
target: 'esnext',
module: 'esnext',
moduleResolution: 'node',
lib: [
'esnext',
'esnext.asynciterable',
'dom'
],
esModuleInterop: true,
experimentalDecorators: true,
allowJs: true,
sourceMap: true,
strict: true,
noImplicitAny: false,
noEmit: true,
baseUrl: '.',
paths: {
'~/*': [
'./*'
],
'@/*': [
'./*'
]
},
typeRoots: [
'./node_modules/@types',
'./node_modules/@nuxt/vue-app/types'
]
}
}https://github.com/chanlito/nuxt-typecheck-bug
npm inpm run devTypescript errors to appear in the terminal.
Typescript errors not showing up.
Using nuxt without custom server & with @nuxt/typescript seems to work fine.
https://github.com/orblazer/gestion-tmp
vue-toasted (https://github.com/orblazer/vue-toasted/tree/patch-1) and link that (ex: yarn link)@nuxtjs/toast (nuxt-community/legacy-modules#272) and link that (ex: yarn link)yarn devThat run perfectly (without error)
This is run with error on nuxt but not have error in Visual Studio Code.
The error : https://imgur.com/DQmlHyP
create nuxt-app , then change js to ts, and run ' yarn dev '.
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ
โ IMPORTANT : Package deprecation โ
โ โ
โ Nuxt TypeScript Support has been refactored to be used with nuxt package. โ
โ Which means that nuxt-ts package is now no longer needed and is now tagged as deprecated. โ
โ We highly recommend to follow the guidelines below : โ
โ โ
โ Migration guide (2.5.x) โ
โ โ
โ Using yarn โ
โ yarn remove nuxt-ts โ
โ yarn add nuxt โ
โ yarn add -D @nuxt/typescript โ
โ โ
โ Using npm โ
โ npm uninstall nuxt-ts โ
โ npm install nuxt โ
โ npm install -D @nuxt/typescript โ
โ โ
โ ----- nuxt.config.ts ----- โ
โ | build: { | โ
โ | -- useForkTsChecker: ... | โ
โ | ++ typescript : { | โ
โ | ++ typeCheck: ... | โ
โ | ++ } | โ
โ | } | โ
โ -------------------------- โ
โ โ
โ Find more information in updated docs : https://nuxtjs.org/guide/typescript โ
โ โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ
โ Nuxt.js v2.6.3 โ
โ Running in development mode (universal) โ
โ TypeScript support is enabled โ
โ โ
โ Listening on: http://localhost:3000/ โ
โ โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
/Users/herrdu/project/4paradigm/zhongbaoyun/ued-front/node_modules/nuxt-ts/bin/nuxt-ts.js:7
boxen(
^
TypeError: boxen is not a function
at Object. (/Users/herrdu/project/4paradigm/zhongbaoyun/ued-front/node_modules/nuxt-ts/bin/nuxt-ts.js:7:3)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:719:10)
at startup (internal/bootstrap/node.js:228:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:575:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
In nuxt-ts.js file , I found
const boxen = require("boxen").default;
If I modify it as beblow :
const boxen = require("boxen");
It will be correct.
Not available
Have srcDir for example not in rootdir, but in frontend
Try nuxt-ts dev frontend
It should work like nuxt dev frontend
It does not respect the directory as the second argument and tries to run nuxt in rootDir
rootDir is set by process.argv here
These don't work either:
nuxt-ts build frontend
nuxt-ts start frontend
nuxt-ts generate frontend
A workaround posted in Discord is setting srcDir to frontend in this case in nuxt.config.ts
Describe the bug
When I wish to import components from my source folder using alias @, TypeScript checker returns me an error in logs. Also, code runs properly.
To Reproduce
Steps to reproduce the behavior:
Run https://codesandbox.io/s/issue-alias-nuxt-typescript-o5wzk
Expected behavior
No error in console. TypeScript loader have to retrieve the way to get the right folder (in the codesandbox case, it's on the root folder).
Screenshots
Is your feature request related to a problem? Please describe.
In the class-api examples, the vue-property-decorator library was used. But this library does not contain all the parameters of the nuxt components.
Describe the solution you'd like
Use nuxt-property-decorator in examples. It is clearer for nuxt.
https://github.com/marc1404/nuxt-babel-cacheDirectory
The NuxtConfiguration type should include a boolean property called cacheDirectory on the babel property.
The property is missing from the type and shows as an error in WebStorm.
The property is still referenced on the Nuxt documentation:
https://nuxtjs.org/api/configuration-build/#babel
https://github.com/iwata/nuxt.js/tree/build-bug
$ git clone [email protected]:iwata/nuxt.js.git
$ cd ./nuxt.js
$ git checkout -t origin/build-bug
$ cd examples/typescript-tsx
$ yarn install
$ yarn build
$ echo $?echo $? will show 1.
echo $? shows 0.
If nuxt build fails in v2.4.0, it will be status code 1 as expected.
https://codesandbox.io/s/zrl1qrlo3p
Go to the CodeSandbox reproduction link and open the terminal window.
Resolve .vue files without throwing errors in the terminal.
It resolves .vue files but still throws an error in the terminal.
ERROR in ~/pages/index.vue
Cannot find module '~/components/HelloWorld'.
import HelloWorld from "~/components/HelloWorld";
https://codesandbox.io/s/9390o40nn4
I am using nuxt + typescript and am trying to get a dynamic page title to work using the head() function in my class, based on some asyncData I pull from an API. It doesn't seem to be called at all atm. It does work when I put the head() function in my component decorator, but in that case I cannot use the asyncData() using the this context
Reproduce in the sandbox at https://9390o40nn4.sse.codesandbox.io/some-page for example
The page title will be set
It's not being set ;)
https://codesandbox.io/s/kwzmy8v1oo
Run the "dev" command from the code in the provided sandbox, no type checking is run when using the Builder programmatically. It appears to run correctly given the same configuration when directly using the "nuxt" command from the command line instead.
https://codesandbox.io/s/0qmykr7wq0
Using the official Nuxt with TypeScript example on CodeSandbox:
tsconfig.json in any wayTS support will be detected again and any modifications to tsconfig.json will be overridden.
The existing tsconfig.json is unmodified.
The tsconfig.json content is overridden.
I've also noticed that the generation of the tsconfig.json doesn't seem to respect the srcDir setting in the Nuxt config.
For some background: we have a setup where we use TS for our server-side code and our Nuxt code in the same repo. At present, we have a tsconfig.json in the root for our server code and then a separate tsconfig.json for our Nuxt setup in a subdirectory (which is ignored by the first config file).
Since 2.5.0 our root tsconfig.json is being overridden by the automatically generated one. I don't think this would cause any issues if it respected the srcDir config option (i.e. generated it in the subdirectory) although it seems feasible to me that people may want to modify their config and overriding it every time may not be the best option.
Currently I have to do several things to support css-modules in my code:
// client/shims/styles.d.ts
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
// Augmentation to allow css-modules in .vue files:
$style: { [key: string]: string };
}
}Source: https://github.com/wemake-services/wemake-vue-template/blob/master/template/client/shims/style.d.ts
webpack configuration to work with typings-for-css-modules-loader or css-modules-typescript-loaderAnd I think that it can be supported out-of-the box. It might fill in the gap between typescript and css.
My motivation is quite simple: I do not want to have runtime problems with code like this:
<template>
<div :class="$style.actions">
<button
:class="$style.reload"
@click="fetchComments"
>
reload comments
</button>
</div>
</template>
<style module>
.actions {
text-align: center;
}
.reload {
display: inline-block;
}
</style>Full source: https://github.com/wemake-services/wemake-vue-template/blob/master/template/client/components/ActionBar.vue
Is $style.actions in scope? What will happen when I rename .reload or .actions classes? What if I have a typo there?
I use typescript to get rid of these kind of errors in my app. But now it works only with my logic (aka scripts). I also want my styles to be safe.
Maybe a plugin will also work fine. Will be happy to write it if core support is not planned.
Next analog: https://github.com/forthedamn/next-typed-css
Cheers!
This could solve types definition for module options.
Example :
When we want load module like @nuxtjs/dotenv with options, we could not have types definition for that options.
In code :
import NuxtConfiguration from '@nuxt/config'
const config: NuxtConfiguration = {
modules: [
['@nuxtjs/dotenv', {
systemvars: true
}]
]
}
export default configExplain: With that we don't have error but we don't have types on systemvars and could not define that types
For that i propose use object for modules.
With could like that :
modules: {
'@nuxtjs/dotenv': {}, // Without options
'@nuxtjs/dotenv': { // With options
systemvars: true
}
}And with that on modules we could define types like :
declare module '@nuxt/config/types/module' {
export interface NuxtConfigurationModuleOptions {
'@nuxtjs/dotenv': {
systemvars?: boolean
}
}
}https://nuxtjs.org/api/context
Type of context.app is defined as Vue [1] but it isn't really a Vue instance. It's just an object with root Vue instance options and also optionally other stuff injectected manually from plugins or through inject function.
Documentation is also confused about it. It says type = Root Vue Instance but in description it says The root Vue instance *options* that includes all your plugins. (emphasis mine).
context.app doesn't bare Vue type but something custom.
context.app type is Vue.
Describe the bug
I can't read this.$store.state when I run with ts-node server/index.ts
but I can when I run with yarn nuxt-ts
I checked it inside .nuxt
This image with ts-node server/index.ts
this image with yarn nuxt-ts
https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/named-views
Te reproduction link is actually the example from the documentation as I really don't find the time to setup a TypeScript project for this. It's also not necessary to reproduce it. Looking at the types of vue-router and the non-TypeScript example should make things clear.
The code example for Nested Views shown in the Nuxt documentation shows how to use extendRoutes in the nuxt.config.js to access the children attribute of the parameter routes.
The parameter routes is of type Route[]. The type Route actually doesn't have a property children per typing definition. But the type RouteConfig.
https://router.vuejs.org/api/#router-construction-options
My assumption is, the parameter routes should be of the type RouteConfig.
No TypeScript error when accessing routes[index].children in the nuxt configuration.
TypeScript error Property 'children' does not exist on type 'Route'.
TypeScript ecosystem is moving from TSLint to ESLint. Please update your example / starter templates.
https://eslint.org/blog/2019/01/future-typescript-eslint
https://artsy.github.io/blog/2019/01/29/from-tslint-to-eslint/
https://github.com/haryu703/ts_express
git clone [email protected]:haryu703/ts_express.git
cd ts_express
yarn install
yarn dev
No warnings occur.
Following warning has occurred.
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-estree.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: >=3.2.1 <3.5.0
YOUR TYPESCRIPT VERSION: 3.5.1
Please only submit bug reports when using the officially supported version.
=============
This warning has occurred when developing Nuxt.js+express application.
Related issues:
typescript-eslint/typescript-eslint#577
facebook/create-react-app#7160
While we can access the returned type information of Vue native apis (i.e. data, computed, props, methods), the return type of asyncData function is totally lost from "this" object.
I'm not sure if it's even possible to combine these type information without changes on Vue core types, but I believe it is 'must-have' goal for us to provide safe, correct, efficient type definitions for users.
I've already spent some hours to solve this problem yet I haven't seen a daylight. Hope I can rely on your help.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.