Esurnir posted a new bug report
typescript-template •
https://github.com/Esurnir/real-world-nuxt/tree/thistypingrepro
Clone the repository.
Install dependencies with "yarn"
Run the server with yarn dev.
Check the _id.vue file in visual studio code with Vetur.
No typescript error get emitted when running the server.
No typescript error in Vetur.
In the console output I get :
TS2339: Property 'id' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
14 | head() {
15 | return {
16 | title: "Event #" + this.id,
| ^^
17 | meta: [
18 | {
19 | hid: "description",
in visual studio code I get "Property 'id' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.Vetur(2339)"
I can go around it by using this.$route.params.id which is properly typed. I've already added type annotation to the id.
I can of course do (this as any).id but that defeats the purpose of the typings.
brokenthorn posted a new question
typescript-template •
Hello.
I'm basing my app on the typescript-template.
I've built upon the Vuex root module example to create namespaced sub-modules.
For example:
Root module types:
// file '@/types/store.ts'
/** Root state. */
export interface IRootState {
applicationVersion: string;
authenticated: boolean;
}
/** Root state actions. */
export interface IRootActions extends ActionTree<IRootState, IRootState> {
/** Special function called by Nuxt automatically on the server-side to init the store. */
nuxtServerInit(
actionContext: ActionContext<IRootState, IRootState>,
appContext: AppContext
): Promise<void>;
/** Reload all nomenclatures data from backend API. */
reloadAllNomenclatures(
actionContext: ActionContext<IRootState, IRootState>,
appContext: AppContext
): Promise<void>;
}
Root module declaration:
// file '@/store/index.ts
export const state = (): IRootState => ({
applicationVersion: '0.1.0',
authenticated: true,
});
export const actions: IRootActions = {
async nuxtServerInit({ dispatch }, { $axios }) {
log.info('nuxtServerInit dispatched.');
log.warn(
`root action test: Do I get Nuxt context and $axios in it?: ${
$axios ? 'yes' : 'no'
}`
);
try {
await dispatch('reloadAllNomenclatures');
} catch (err) {
log.error(err);
}
},
async reloadAllNomenclatures({ dispatch }) {
log.info('reloadAllNomenclatures dispatched.');
try {
await dispatch('productCreationRequests/reloadProductCreationRequests'); // Take note of this line.
await dispatch('productCategories/reloadProductCategories');
await dispatch('productTypes/reloadProductTypes');
await dispatch('companies/reloadCompanies');
} catch (err) {
log.error(err);
}
},
};
Submodule types:
// file '@/types/store.ts'
/**
* Product Creation Requests state.
*/
export interface IProductCreationRequestsState {
/**
* Product creation requests list.
*/
list: IProductCreationRequest[];
}
/**
* Product Creation Requests state actions.
*/
export interface IProductCreationRequestsActionTree
extends ActionTree<IProductCreationRequestsState, IRootState> {
/** Reload product creation requests from backend API. */
reloadProductCreationRequests(
actionContext: ActionContext<IProductCreationRequestsState, IRootState>,
appContext: AppContext
): Promise<void>;
}
Submodule declarations:
// file '@store/productCreationRequests.ts'
export const state = (): IProductCreationRequestsState => ({
list: [],
});
export const actions: IProductCreationRequestsActionTree = {
async reloadProductCreationRequests({ commit }, { $axios }) {
log.info('reloadProductCreationRequests dispatched.');
try {
const productCreationRequests = await $axios.$get(
'product-creation-requests'
);
commit('setProductCreationRequests', productCreationRequests);
} catch (err) {
log.error(err);
}
},
};
But then I get this error when refreshing the web browser:
i Type checking in progress...nuxt:typescript 06:47:44
i No type errors foundnuxt:typescript 06:47:46
i Version: typescript 3.8.3nuxt:typescript 06:47:46
i Time: 2431 msnuxt:typescript 06:47:46
i nuxtServerInit dispatched.06:48:00
WARN root action test: Do I get Nuxt context and $axios in it?: yes06:48:00
i reloadAllNomenclatures dispatched.06:48:00
ERROR Cannot destructure property $axios of 'undefined' or 'null'.06:48:00
at Store.reloadProductCreationRequests (server.js:4069:5)
at Array.wrappedActionHandler (node_modules\vuex\dist\vuex.common.js:753:23)
at Store.dispatch (node_modules\vuex\dist\vuex.common.js:444:15)
at boundDispatch (node_modules\vuex\dist\vuex.common.js:334:21)
at Store.reloadAllNomenclatures (server.js:3937:13)
at Array.wrappedActionHandler (node_modules\vuex\dist\vuex.common.js:753:23)
at Store.dispatch (node_modules\vuex\dist\vuex.common.js:444:15)
at boundDispatch (node_modules\vuex\dist\vuex.common.js:334:21)
at Store.nuxtServerInit (server.js:3925:13)
at Array.wrappedActionHandler (node_modules\vuex\dist\vuex.common.js:753:23)
Notice the WARN above. That's my testing if { $axios }
was destructured in one of the root actions. And it was.
But, it isn't in other modules: notice the ERROR above.
Is it obvious where I'm doing something wrong or do I need to make an MRE?
brokenthorn posted a new bug report
typescript-template •
https://github.com/nuxt-community/typescript-template/issues/new
Should point to correct URL: https://cmty.app/nuxt/issues/new?type=bug-report&repo=typescript-template
Being pointed to nonexistent URL https://nuxtjs.cmty.io/issues/new
finntenzor posted a new bug report
typescript-template •
https://github.com/finntenzor/congenial-parakeet
npx create-nuxt-app akblog
cd akblog
yarn dev
Runs successfully
119:18 Interface 'NuxtApp' incorrectly extends interface 'Vue'.
Types of property '$loading' are incompatible.
Type 'NuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'.
Type 'DefaultNuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'.
Type 'DefaultNuxtLoading' provides no match for the signature '(options: LoadingServiceOptions): ElLoadingComponent'.
117 | }
118 |
119 | export interface NuxtApp extends Vue {
| ^
120 | $options: NuxtAppOptions
121 | $loading: NuxtLoading
122 | context: Context
i Version: typescript 3.8.3
Actually, "yarn build" doesn't work, either.
119:18 Interface 'NuxtApp' incorrectly extends interface 'Vue'.
Types of property '$loading' are incompatible.
Type 'NuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'.
Type 'DefaultNuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'.
Type 'DefaultNuxtLoading' provides no match for the signature '(options: LoadingServiceOptions): ElLoadingComponent'.
117 | }
118 |
119 | export interface NuxtApp extends Vue {
| ^
120 | $options: NuxtAppOptions
121 | $loading: NuxtLoading
122 | context: Context
FATAL Nuxt build error 09:02:33
at WebpackBundler.webpackCompile (nodemodules\@nuxt\webpack\dist\webpack.js:5351:21)
at processTicksAndRejections (internal/process/taskqueues.js:93:5)
at WebpackBundler.build (nodemodules\@nuxt\webpack\dist\webpack.js:5300:5)
at Builder.build (nodemodules\@nuxt\builder\dist\builder.js:5602:5)
at Object.run (nodemodules\@nuxt\cli\dist\cli-build.js:104:7)
at NuxtCommand.run (nodemodules\@nuxt\cli\dist\cli-index.js:2759:7)
╭─────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: Nuxt build error │
│ │
╰─────────────────────────────╯
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
sajjad-shirazy posted a new question
typescript-template •
Hi there,
I'm in windows and used this configuration, but the app doesn't run:
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "client: chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "server: nuxt",
"args": ["dev"],
"osx": {
"program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
},
"linux": {
"program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
},
"windows": {
"program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
}
}
],
"compounds": [
{
"name": "fullstack: nuxt",
"configurations": ["server: nuxt", "client: chrome"]
}
]
}
is any idea how it would be?
sajjad-shirazy posted a new question
typescript-template •
Hi there,
I'm in windows and used this configuration, but the app doesn't run:
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "client: chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "server: nuxt",
"args": ["dev"],
"osx": {
"program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
},
"linux": {
"program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
},
"windows": {
"program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
}
}
],
"compounds": [
{
"name": "fullstack: nuxt",
"configurations": ["server: nuxt", "client: chrome"]
}
]
}
is any idea how it would be?
sdr0x07b6 posted a new question
typescript-template •
It works, but an error is displayed on the terminal.
Property '$toast' does not exist on type 'Top'.
I created a TypeScript project based on nuxt-community/typescript-template
vue init nuxt-community/typescript-template mypj
Added @nuxtjs/toast
yarn add @nuxtjs/toast
A module has been loaded.
nuxt.config.ts
{
...,
modules: [
...,
['@nuxtjs/toast', {
position: 'top-right',
duration: 5000,
}],
],
...,
}
$toast
on page Top
.pages/index.vue
<template>
<button @click="click">Toast</button>
</template>
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator"
@Component
export default class Top extends Vue {
private click() {
this.$toast.show('Message')
}
}
</script>
The module is loaded and working, but an error is displayed.
Do I have anything else to do?
donPuerto posted a new question
typescript-template •
Hope there is a boilerplate for typescript + vuetify + express.
donPuerto posted a new question
typescript-template •
Any idea?
dongH555 posted a new question
typescript-template •
khrome83 posted a new question
typescript-template •
NOTE - Link to nuxtjs.cmty.io failed. Posting without using 3rd party app, please do not delete.
Following install instructions in README.md
No other changes
Following install instructions in README.md
No other changes
TypeScript works as expected…
pages/index.vue
file throws a TypeScript error -
@State people:Person
gives a error.
components/Card.vue
file throws a TypeScript error -
@Prop() person: Person
gives a error.
The code is copied and pasted exactly.
riso348 posted a new bug report
typescript-template •
https://jsfiddle.net/odzj1304/
asyncData method not update property or print anything to console if i type console.log…
Change title variable to "Test"
Leave title "A"
MacZel posted a new question
typescript-template •
Is there a way to support TSX in render function? Unfortunately I can't make it to work.
warheartvik posted a new question
typescript-template •
Hello,
What is the correct way to implement a layout prop on nuxt with typescript?
My project has a login page which I show withot any layout (a blank layout) but if I refresh the page, the login page takes the defaulf layout, how can I prevent that?
Best regards!
warheartvik posted a new question
typescript-template •
Hello,
I'm trying to use The loading Property on my nuxt-typescript project, but, I'm gettin an error using 'this.$nuxt.$loading.start()' on my script, I think i'm missing an import, but I have no idea what should I import.
Any suggestions?
Best regards to everyone!
P4sca1 posted a new bug report
typescript-template •
https://github.com/nuxt-community/typescript-template
vue init nuxt-community/typescript-template my-project
cd my-project
npm i -S [email protected]
npm install
npm run dev
Working nuxt.js installation with TypeScript support.
TypeError: Cannot set property 'ts' of undefined
at Builder.extendBuild.config (modules/typescript.js:24:33)
at Builder.<anonymous> (node_modules/nuxt/dist/nuxt.js:155:17)
at WebpackClientConfig.extendConfig (node_modules/nuxt/dist/nuxt.js:3126:56)
at WebpackClientConfig.extendConfig (node_modules/nuxt/dist/nuxt.js:3258:26)
at WebpackClientConfig.config (node_modules/nuxt/dist/nuxt.js:3164:33)
at WebpackClientConfig.config (node_modules/nuxt/dist/nuxt.js:3292:26)
at Builder.webpackBuild (node_modules/nuxt/dist/nuxt.js:3879:56)
at Builder.build (node_modules/nuxt/dist/nuxt.js:3590:16)
at <anonymous>
tamanyan posted a new feature request
typescript-template •
Use TypeScript 3 in this template
tamanyan posted a new question
typescript-template •
Could you update TypeScript in package.json
stepbeekio posted a new feature request
typescript-template •
https://nuxtjs.org/api/pages-fetch/
I would like support for the above Nuxt.js function such that the following code works:
export default Vue.extend({
...
async fetch({ store }) {
await store.dispatch('someAction');
}
...
})
Currently, this is met with a TS2345 error since the argument is not declared in the Vue.js Typescript definitions. I'm not sure if the onus is on Nuxt here, or whether the Vue.js typescript project should offer something more general?
AndrewBogdanovTSS posted a new question
typescript-template •
Looking at the template I see that current tsconfig.json doesn't have a "files" or "excluded" properties specified, does this mean that all [ts] files from "nodemodules" folder are being compiled? If I try to exclude "node_modules" I start getting compilation errors when I run "nuxt" command