Typescript-template · Nuxt Community

Activities

brokenthorn posted a new question

typescript-template •

Why is appContext null for Vuex namespaced modules other than the root module?

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 •

GitHub issue template points to wrong CMTY app address

Version

v2.12.2

Reproduction link

https://github.com/nuxt-community/typescript-template/issues/new

Steps to reproduce

Open a new issue on Github: https://github.com/nuxt-community/typescript-template/issues/new
Read the issue template, note it says: IMPORTANT: Please use the following link to create a new issue: https://nuxtjs.cmty.io/issues/new
Access the URL being pointed to
Get a DNS name resolution error

What is expected ?

Should point to correct URL: https://cmty.app/nuxt/issues/new?type=bug-report&repo=typescript-template

What is actually happening?

Being pointed to nonexistent URL https://nuxtjs.cmty.io/issues/new

finntenzor posted a new bug report

typescript-template •

Interface 'NuxtApp' incorrectly extends interface 'Vue'. Types of property '$loading' are incompatible.

Version

v2.12.1

Reproduction link

https://github.com/finntenzor/congenial-parakeet

Steps to reproduce

npx create-nuxt-app akblog
cd akblog
yarn dev

What is expected ?

Runs successfully

What is actually happening?

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

Additional comments?

Actually, "yarn build" doesn't work, either.

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 •

How do i can debug it in VS Code?

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 •

How do i can debug it in VS Code?

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 •

[@nuxtjs/toast][Question] Property '$toast' does not exist on type 'Top'.

nuxt v2.10.2
@nuxtjs/toast v3.3.0

What is happening

It works, but an error is displayed on the terminal.
Property '$toast' does not exist on type 'Top'.

What I did

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,
    }],
  ],
  ...,
}

I used $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>

Question

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 •

How to include vuetify package?

Hope there is a boilerplate for typescript + vuetify + express.

donPuerto posted a new question

typescript-template •

Fresh Installed and got this error

Any idea?

dongH555 posted a new question

typescript-template •

axios 编辑器一直报错

WeChat7358e0b784e38f5ef915d0305d69c640

khrome83 posted a new question

typescript-template •

TypeScript template has error when installing in latest version

NOTE - Link to nuxtjs.cmty.io failed. Posting without using 3rd party app, please do not delete.

Version

v2.6.1

Reproduction link

Following install instructions in README.md
No other changes

Steps to reproduce

Following install instructions in README.md
No other changes

What is expected?

TypeScript works as expected…

What is actually happening?

pages/index.vue file throws a TypeScript error -
@State people:Person gives a error.

Screen Shot 2019-04-17 at 7 12 47 AM

components/Card.vue file throws a TypeScript error -
@Prop() person: Person gives a error.

Screen Shot 2019-04-17 at 7 12 37 AM

Additional comments?

The code is copied and pasted exactly.

riso348 posted a new bug report

typescript-template •

asyncData not working

Version

2.0

Reproduction link

https://jsfiddle.net/odzj1304/

Steps to reproduce

asyncData method not update property or print anything to console if i type console.log…

What is expected ?

Change title variable to "Test"

What is actually happening?

Leave title "A"

MacZel posted a new question

typescript-template •

TSX support in render functions

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 •

Layout Property

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 •

$nuxt.$loading

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 •

Not compatible with nuxt 2.0.0

Version

2.0.0

Reproduction link

https://github.com/nuxt-community/typescript-template

Steps to reproduce

vue init nuxt-community/typescript-template my-project
cd my-project
npm i -S [email protected]
npm install
npm run dev

What is expected ?

Working nuxt.js installation with TypeScript support.

What is actually happening?

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 •

Update TypeScript version

What problem does this feature solve?

Use TypeScript 3 in this template

tamanyan posted a new question

typescript-template •

Update TypeScript

Could you update TypeScript in package.json

stepbeekio posted a new feature request

typescript-template •

Nuxt.js fetch functionality

What problem does this feature solve?

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 •

Should node_modules folder be excluded inside tsconfig.json?

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

hukusuke1007 posted a new question

typescript-template •

About correct implementation method using router and props in TypeScript

I would like to set props paramater in TypeScript

this.$router.push( {name: 'nextPage', params: {id: 1, message: 'message'}} )

But it is occur error TS2345.

TS2345: Argument of type '{ name: string; params: { id: number; message: string; }; }' is not assignable to parameter of type 'RawLocation'.
Type '{ name: string; params: { id: number; message: string; }; }' is not assignable to type 'Location'.
Types of property 'params' are incompatible.
Type '{ id: number; message: string; }' is not assignable to type 'Dictionary<string> | undefined'.
Type '{ id: number; message: string; }' is not assignable to type 'Dictionary<string>'.
Property 'id' is incompatible with index signature.
Type 'number' is not assignable to type 'string'.

The implementation of the next page is as follows.

// nextPage
import {
  Component,
  Vue
} from "nuxt-property-decorator"
import { State } from "vuex-class"
import { print } from "util";
@Component({
  components: {
  },
  props: {
    id: {
      type: Number,
      default: -1
    },
    message: {
      type: String,
      default: 'default'
    }
  },
  watch: {
    message (oldVal, newVal) {
      console.log(oldVal, newVal)
    }
  }
})
export default class nextPage extends Vue {
  // @State people
  // function.
  created() {
    console.log('created before DOM')
  }
  mounted() {
    console.log('mounted after DOM')
  }
}

Please tell me how to implement correct props

Trending Issues see all

Why is appContext null for Vuex namespaced modules other than the root module?

#c58 created a month ago by brokenthorn

GitHub issue template points to wrong CMTY app address

#c57 created a month ago by brokenthorn

Interface 'NuxtApp' incorrectly extends interface 'Vue'. Types of property '$loading' are incompatible.

#c56 created 2 months ago by finntenzor

Latest Releases see all

Support Nuxt 2.6.1 (v2.6.1)

Released a year ago