nuxt-community / typescript-template Goto Github PK
View Code? Open in Web Editor NEWTypescript starter for Nuxt 2
Home Page: https://nuxt-ts-template.netlify.app/
License: MIT License
Typescript starter for Nuxt 2
Home Page: https://nuxt-ts-template.netlify.app/
License: MIT License
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:
todos.ts
inside store folderimport 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),
}
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?
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?
6af12b03f798c7a0a50c209a98a833ac57753402
https://github.com/nuxt-community/typescript-template
Before running make sure that vue-dev-tools
is installed in your browser.
npx vue-cli init nuxt-community/typescript-template my-ts-project
npm install
npm run dev
and visit localhost:3000
I expect that my state, my components, and my event will be shown.
Nothing is shown. All tabs are empty.
Other apps work fine.
Hi
I have a error
TS2339: Property 'BROWSER_BUILD' does not exist on type 'Process'.
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
[not required](not required)
vue init nuxt-community/typescript-template my-project
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
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>
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.
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
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>
$ vue init nuxt-community/typescript-template myapp
$ cd myap
$ yarn
yarn install v1.3.2
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > [email protected]" has unmet peer dependency "vue@^2.5.13".
warning " > [email protected]" has unmet peer dependency "vuex@^3.0.1".
warning "nuxt-class-component > [email protected]" has unmet peer dependency "vue@^2.5.0".
warning "nuxt-class-component > [email protected]" has unmet peer dependency "vuex@^3.0.0".
warning " > [email protected]" has unmet peer dependency "vue@^2.0.0".
warning " > [email protected]" has unmet peer dependency "vuex@^2.0.0".
[4/4] 📃 Building fresh packages...
success Saved lockfile.
✨ Done in 14.31s.
$ yarn dev
yarn dev
yarn run v1.3.2
$ nuxt
WARN ~modules/typescript.ts
Supporting callbacks is depricated and will be removed in next releases. Consider using async/await.
ERROR
TypeError: Cannot read property 'loaders' of undefined
- typescript.ts:12 Builder.extendBuild.config
/Users/hipertracker/myapp/modules/typescript.ts:12:20
- utils.js:112 Builder.<anonymous>
[myapp]/[nuxt]/lib/common/utils.js:112:17
- client.config.js:208 Builder.webpackClientConfig
[myapp]/[nuxt]/lib/builder/webpack/client.config.js:208:54
- builder.js:485 Builder.webpackBuild
[myapp]/[nuxt]/lib/builder/builder.js:485:46
- builder.js:168 Builder.build
[myapp]/[nuxt]/lib/builder/builder.js:168:16
$ 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
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"
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:
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
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
Fresh install from vue-cli
installed packages
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
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?
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 ?
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
It seems to be doing a lot of boilerplate in addition to being ts. Vuex-typex
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?
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>
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
.
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);
}
};
I want to know the reasons why it crashes when there exists the function nuxtServerInit()
..
Thank you.
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
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 (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.
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]
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 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?
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?
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:
$ 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
yarn generate
as build command, dist
as publish directoryThanks for the help!
To get one step to select between JS and TS. Create-nuxt-app
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?
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?
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 ?
https://github.com/Esurnir/real-world-nuxt/tree/this_typing_repro
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.
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:
8.4.0
5.3.0
0.27.5
2.8.2
2.5.2
Any suggestions on how I can resolve this?
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"
},
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.