Right now the template uses quite outdated version of Nuxt as well as other project dependencies. Please, update all project dependencies to use latest available packages. Upgrading manually causes issues right now

When I try to import a component in pages/index.vue like this:

import MyComponent from "~components/MyComponent.vue"

@Component({
  components: {
    MyComponent,
  }
})

I got this error:

error TS2307: Cannot find module '~components/MyComponent.vue'.

~components/MyComponent.vue:

<template>
  <div>
    This is my component
  </div>
</template>

Am I missing anything?

Any idea?

It seems to be doing a lot of boilerplate in addition to being ts. Vuex-typex

Since the project was updated to Nuxt v. 1.3.0 I started getting a deprecation warning inside my middleware functions:
context.isClient has been deprecated, please use process.client instead.
the funny part is that I can't change my code to use process.client instead because of TS error:
TS2339: Property 'client' does not exist on type 'Process'.
so it seems like this change was made without TS in mind. How can this typing issue be fixed?

Nice starter.

When I run the commands: npm run dev, npm run build, everything works well. But it reports an error when running the script npm run generate.

Here are logs:

The project has been compiled because I can find the distribution folder. It failed at rendering url "/".

In the file /store/index.js:

export const actions = {
  async nuxtServerInit({ commit }) { // <--
    const response = await axios.get("/random-data.json");
    const people = response.data.slice(0, 10);
    commit("setPeople", people);
  },
  select({ commit }, id) {
    commit("select", id);
  }
};

I edit it to that:

export const actions = {
  async fetch({ commit }) { // <-- change nuxtServerInit() to fetch()
    const response = await axios.get("/random-data.json");
    const people = response.data.slice(0, 10);
    commit("setPeople", people);
  },
  select({ commit }, id) {
    commit("select", id);
  }
};

Then it works:

I want to know the reasons why it crashes when there exists the function nuxtServerInit()..
Thank you.

Fresh install from vue-cli

installed packages

• [email protected]
• [email protected]
• [email protected]

After npm run dev I got this.

TypeError: Cannot read property 'loaders' of undefined
  
  - typescript.ts:12 Builder.extendBuild.config
    ~/site-v2/modules/typescript.ts:12:20
  
  - utils.js:77 Builder.<anonymous>
    [site-v2]/[nuxt]/lib/common/utils.js:77:17
  
  - client.config.js:223 Builder.webpackClientConfig
    [site-v2]/[nuxt]/lib/builder/webpack/client.config.js:223:54
  
  - builder.js:372 Builder._callee5$
    [site-v2]/[nuxt]/lib/builder/builder.js:372:46
  
  - builder.js:173 Builder._callee$
    [site-v2]/[nuxt]/lib/builder/builder.js:173:16

Could you update TypeScript in package.json

After executing the following commands:

vue init nuxt-community/typescript-template hello-nuxt
cd hello-nuxt
yarn
yarn dev (or npm run dev)

I'm getting the following error:

TypeError: Cannot read property 'loaders' of undefined

Logs from the last command:

yarn dev v0.27.5
$ nuxt
  nuxt:build App root: /home/user/testing/vue/hello-nuxt +0ms
  nuxt:build Generating /home/user/testing/vue/hello-nuxt/.nuxt files... +2ms
  nuxt:build Generating files... +10ms
  nuxt:build Generating routes... +8ms
  nuxt:build Building files... +26ms
  TypeError: Cannot read property 'loaders' of undefined
  
  - typescript.ts:12 Builder.extendBuild.config
    /home/user/testing/vue/hello-nuxt/modules/typescript.ts:12:19
  
  - utils.js:77 Builder.<anonymous>
    [hello-nuxt]/[nuxt]/lib/common/utils.js:77:17
  
  - client.config.js:223 Builder.webpackClientConfig
    [hello-nuxt]/[nuxt]/lib/builder/webpack/client.config.js:223:54
  
  - builder.js:372 Builder._callee5$
    [hello-nuxt]/[nuxt]/lib/builder/builder.js:372:46
  
  - builder.js:173 Builder._callee$
    [hello-nuxt]/[nuxt]/lib/builder/builder.js:173:16

Versions:

• node: 8.4.0
• npm: 5.3.0
• yarn: 0.27.5
• vue: 2.8.2
• typescript: 2.5.2

Any suggestions on how I can resolve this?

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.

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

Additional comments?

The code is copied and pasted exactly.

Hi

I have a error

TS2339: Property 'BROWSER_BUILD' does not exist on type 'Process'.

in these code

And when change process.BROWSER_BUILD for (<any>process).BROWSER_BUILD by (<any>process).BROWSER_BUILD it do another error

I don't know how to resolve..

Thanks

Hi. Could you, please, provide some tutorial how to integrate any of these tools into this nuxt-project? I have spent a lot of time to try to configure but it doesn't work at all.

Many thanks for any help.

I've created a dynamically routed page _id.vue inside of my pages folder and I want to have access to that id property inside of my TS class. I can access it in my template by writing {{$route.params.id}} but when I try to reference $route inside of the class I get an error:
error TS2304: Cannot find name '$route'.
I've tried to reference it using this like so
this.$route.params
but then I get TS precompile error:
error TS2339: Property '$route' does not exist on type 'default'.
I also tried to reference it without a $ sign like so
this.route.params
but still got the same error.
How can I access route params?

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"

Version

v2.12.2

Reproduction link

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

Steps to reproduce

1. Open a new issue on Github: https://github.com/nuxt-community/typescript-template/issues/new
2. Read the issue template, note it says: IMPORTANT: Please use the following link to create a new issue: https://nuxtjs.cmty.io/issues/new
3. Access the URL being pointed to
4. 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

With the latest changes it will be very helpful to have this template updated as well.

I'm using this template inside Webstorm and once I'm trying to import nuxt-class-component into my project I get a reference highlight in red giving me an error: Cannot resolve definitions for module nuxt-class-component

When I try to fix it by importing a related @typed definition package

I get another error:

I tried to look for a related definition manually but seems like it doesn't exist in the @types repo.
Could someone help me fix this issue?

Hi

I am working with VSC, nuxtjs and typescript, but in the .vue files I can't to see very well the syntax, I installed Vuter, but always it show this error

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

also, some any another errors that in .ts files aren't shows

Thanks

I don't see any reason for keeping these dependencies as root level:

"vue": "^2.5.13",
"vue-meta": "^1.4.2",
"vuex": "^3.0.1",
"vue-router": "^3.0.1",
"webpack": "^3.10.0"

all of those already have been installed by nuxt internally.

as I've highlighted in this issue #31 these dependencies won't be needed when we'll move to nuxt-property-decorator

"vue-property-decorator": "^6.0.0",
"vue-class-component": "^6.1.2",
"nuxt-class-component": "^1.2.0",

These dependencies are also under a question since they don't really relate to a TypeScript template idea and might be made optional to install during template initialization process for users who really like them to be in their template. ( I personally would also like to have SASS support as an option) #32

"gsap": "^1.20.3",
"tachyons": "^4.9.1",
"axios": "^0.17.1",

So, ideally, we should have only these dependencies installed by default:

"dependencies": {
    "nuxt": "^1.3.0",
    "nuxt-property-decorator": "^1.0.0",
    "vuex-class": "^0.3.0"
  },

I mean ~server/index.js, like in nuxt-community/express-template. This would be very useful for starting the development of a more complex application than a simple catalog of personalities.
Will you?

$ npm run dev

@1.0.1 dev /home/bkinsey/opt/gh/bkinsey808/vue-nuxt-experiment
nuxt

nuxt:build App root: /home/bkinsey/opt/gh/bkinsey808/vue-nuxt-experiment +0ms
nuxt:build Generating .nuxt/ files... +2ms
events.js:161
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:3000
at Object.exports._errnoException (util.js:1028:11)
at exports._exceptionWithHostPort (util.js:1051:20)
at Server._listen2 (net.js:1261:14)
at listen (net.js:1297:10)
at doListening (net.js:1396:7)
at _combinedTickCallback (internal/process/next_tick.js:77:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:422:7)
at startup (bootstrap_node.js:143:9)
at bootstrap_node.js:537:3

It's more of a suggestion rather than an issue. Since nuxt-property-decorator exists as a separate module that extends the nuxt-class component, maybe it would be better to use it inside template instead of vue-property-decorator ?

Hi, I'm encountering an error when trying to deploy this template to Netlify.

This error appears in the deployment log, although it still completes and marks the deployment as succesful:

After deployment, this is all that appears when following the genrated URL (https://hardcore-curie-c8f6ae.netlify.com)

I'm not sure if there's something wrong with the template itself or my deployment.

Steps to recreate:

1. $ vue init nuxt-community/typescript-template my-project OR clone my repo of the same: $ git clone https://github.com/salvadornico/nuxt-ts-test.git
2. Add to Github as a new repository
3. Create new site on Netlify, connecting this new repo
4. For deployment settings: yarn generate as build command, dist as publish directory
5. Deploy site

Thanks for the help!

Hi guys.

Is it pobbile to split .vue files under /pages and keep the script in .ts file and the template in .vue files.

am trying to split the html and the script part.

the /pages can have
/pages/index.vue
/pages/index.ts

index.vue - can have reference to script

</div>
<div class="flex flex-wrap ph2 justify-between bg-white-80">
  <div :key="person.id" v-for="person in people">
    <Card :person="person"></Card>
  </div>
</div>

is the above currently possible ?

Version

latest

Reproduction link

[not required](not required)

Steps to reproduce

• Create a normal typescript project by vue init nuxt-community/typescript-template my-project
• Replace nuxt dependencies with nuxt-edge
• Replace ts-loader with latest version of ts-loader (compatible with webpack 4.x)
• Run command nuxt dev

What is expected ?

The app to start normally as per this https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67 which states no changes required for updating a nuxt 1.x project with nuxt 2.x project

What is actually happening?

Receiving an error

 INFO  Building project

✔ success Builder initialized
✔ success Nuxt files generated
✖ error TypeError: Cannot set property 'ts' of undefined
  at Builder.extendBuild.config (/Users/naveen/Downloads/nuxt/ts/modules/typescript.js:24:33)
  at Builder.<anonymous> (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:142:17)
  at WebpackClientConfig.config (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11310:56)
  at Builder.webpackBuild (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11881:56)
  at Builder.build (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11592:16)
  at <anonymous>

yarn works immediately.
npm install doesn't install webpack, vue, vue-meta, vue-router, vuex
npm install && npm install nuxt also works perfectly.

Working:

• Importing .vue files with lang="ts"
• Import .js files

Not working

• Importing .ts files

Steps to reproduce:
Clone repo using vue-cli
Install dependency with npm/yarn
Run npm run dev

ERROR Failed to compile with 2 errors12:32:38

This dependency was not found:

• nuxt-property-decorator in ./node_modules/ts-loader?{"appendTsSuffixTo":[{}]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/Card.vue, ./node_modules/ts-loader?{"appendTsSuffixTo":[{}]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue

To install it, you can run: npm install --save nuxt-property-decorator

nuxt-property-decorator is present in node_modules folder, but it seems that it's broken. It references some unexistent entry point in package.json nuxt-property-decorator.umd
I have strong doubts on whether it should be used instead of nuxt-class-component + vue-property-decorator although it seems logical, the dependency itself is quite problematic

Since we have a @nuxtjs/axios modification that is specifically crafted for use together with Nuxt it will be more logical to use it inside this template

I want to use namespaced stores inside my project. According to Nuxt documentation provided here: https://nuxtjs.org/guide/vuex-store/
namespaced stores should be created automatically after a file is placed inside store folder. But in my case, it doesn't work.
Steps I do:

1. Create a file todos.ts inside store folder

import axios from "~plugins/axios/api"
import {TodosState, Todo, TodoActions, TodoGetters, TodoMutations} from '~/types/todos'
import {AxiosResponse} from 'axios'

export const state = () => ({
    todos: []
} as TodosState)

export const mutations:TodoMutations = {
    add(state:TodosState, todo:Todo){
        state.todos.push(todo)
    },
    remove(state:TodosState, todo:Todo){
        state.todos = state.todos.filter(t => t.id !== todo.id)
    }
}

export const actions:TodoActions = {
    async add({commit}, task){
        const {data}:AxiosResponse<any> = await axios.post('/todos', {task, complete: false})
        commit('add', data)
    },
    async remove({commit}, todo:Todo){
        await axios.delete(`/todos/${todo.id}`)
        commit('remove', todo)
    }
}

export const getters:TodoGetters = {
    active: state => state.todos.filter(t => !t.complete),
    complete: state => state.todos.filter(t => t.complete),
}

2. In my index.vue page I try to use namespaced store:

<script lang="ts">
    import Vue from "vue";
    import Component from "nuxt-class-component"
    import {State, Action, namespace} from "vuex-class"
    import init from '~assets/ts/init'
    import {Todo} from '../types/todos'

    const TodosState = namespace('todos', State);
    const TodosAction = namespace('todos', Action);

    @Component({
        fetch: init
    })
    export default class extends Vue {
        task = ""
        @TodosState todos:Todo[]
        @TodosAction('add') _add
        @TodosAction remove

        add(task){
            this._add(task);
            this.task = "";
        }
    }
</script>

but I get no data and no errors in a console, build process is also fine.
Are there any additional configs I have to make in order to use namespaced store?

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?

Version

6af12b03f798c7a0a50c209a98a833ac57753402

Reproduction link

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

Steps to reproduce

Before running make sure that vue-dev-tools is installed in your browser.

1. Run npx vue-cli init nuxt-community/typescript-template my-ts-project
2. Run npm install
3. Run npm run dev and visit localhost:3000
4. Open dev tools

What is expected ?

I expect that my state, my components, and my event will be shown.

What is actually happening?

Nothing is shown. All tabs are empty.

Additional comments?

Other apps work fine.

To get one step to select between JS and TS. Create-nuxt-app

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: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 (node_modules@nuxt\webpack\dist\webpack.js:5351:21)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at WebpackBundler.build (node_modules@nuxt\webpack\dist\webpack.js:5300:5)
at Builder.build (node_modules@nuxt\builder\dist\builder.js:5602:5)
at Object.run (node_modules@nuxt\cli\dist\cli-build.js:104:7)
at NuxtCommand.run (node_modules@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.

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

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?

What problem does this feature solve?

Use TypeScript 3 in this template

see screenshot. thx.

This example uses class-style components and property decorators. Is there an example without those?

From vue-cli 3 default not using the class-style components:

<template>
  <div class="home">
    <img src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default Vue.extend({
  name: 'home',
  components: {
    HelloWorld,
  },
});
</script>

I want to run Nuxt TS project on the custom port, say localhost:3333. According to Nuxt official documentation in order to do so, I need to specify Nuxt settings inside options object in my package.json file like so:
"config": {
"nuxt": {
"port": "3333"
}
}
but once done I'm starting to get an error:

Error: connect ECONNREFUSED 127.0.0.1:3000 at Object._errnoException (util.js:1041:11) at _exceptionWithHostPort (util.js:1064:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1153:14)
After some investigation I've also changed env.baseUrl to also be on the 3333 port like so:
env: { baseUrl: process.env.BASE_URL || 'http://localhost:3333' }

but such approach is not optimal cos I have to specify that port in 2 places. How can I make the setup respect the port setting that is specified in config.json file?

I can to see that the registerHooks in nuxt-class-component file, are not register the head for to change the attrs of header

That's just a suggestion. Since we don't have any example of a middleware inside a template but we use an undocumented api folder which is just a discrepant addition in my opinion. Why not use middleware as Nuxt intended? api/people.ts can be placed in middleware folder and rewritten as such:

export default async function({store, error, redirect}){
    if(process.client) return;
    await store.dispatch('getPeople')
}

and in the store actions:

async getPeople({commit}){
            commit('setPeople', await axios.get('/random-data.json').data.slice(0,3));
    }

and in nuxt.config.js module.exports object

router: {
    middleware: 'people'
  },

this way we can showcase how middleware function can be used in the template that might be beneficial for a lot of users

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>

Please update demo, it is currently 404.

I've just installed latest template by vue-cli and gotten the following error:

+-- UNMET PEER DEPENDENCY vue@^2.5.9
`-- UNMET PEER DEPENDENCY [email protected]

Version

v2.14.4

Reproduction link

https://github.com/Esurnir/real-world-nuxt/tree/this_typing_repro

Steps to reproduce

Clone the repository.
Install dependencies with "yarn"
Run the server with yarn dev.
Check the _id.vue file in visual studio code with Vetur.

What is expected ?

No typescript error get emitted when running the server.
No typescript error in Vetur.

What is actually happening?

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)"

Additional comments?

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.