{"id":19656191,"url":"https://github.com/daggerok/typescript-component-decorator-nuxt","last_synced_at":"2026-05-06T04:33:06.409Z","repository":{"id":151042149,"uuid":"229159046","full_name":"daggerok/typescript-component-decorator-nuxt","owner":"daggerok","description":"Nuxt.js TypeScript @Component decorator project from scratch + Vuetify","archived":false,"fork":false,"pushed_at":"2024-08-05T19:54:25.000Z","size":15,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-26T20:04:30.124Z","etag":null,"topics":["material-design-icons-iconfont","nuxt","nuxt-typescript","nuxt-typescript-build","nuxt-vuetify","nuxt-vuetify-icons","nuxt-vuetify-mdisvg","nuxt-webfontloader","nuxtjs","nuxtjs-typescript","nuxtjs-vuetify","typescript","vue-property-decorator"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daggerok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-20T00:11:32.000Z","updated_at":"2019-12-20T01:07:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"2f66133c-32b2-4ea9-9f54-1d7a73d4c3f4","html_url":"https://github.com/daggerok/typescript-component-decorator-nuxt","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/daggerok/typescript-component-decorator-nuxt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftypescript-component-decorator-nuxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftypescript-component-decorator-nuxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftypescript-component-decorator-nuxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftypescript-component-decorator-nuxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daggerok","download_url":"https://codeload.github.com/daggerok/typescript-component-decorator-nuxt/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftypescript-component-decorator-nuxt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32678625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T02:33:58.958Z","status":"ssl_error","status_checked_at":"2026-05-06T02:33:39.611Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-design-icons-iconfont","nuxt","nuxt-typescript","nuxt-typescript-build","nuxt-vuetify","nuxt-vuetify-icons","nuxt-vuetify-mdisvg","nuxt-webfontloader","nuxtjs","nuxtjs-typescript","nuxtjs-vuetify","typescript","vue-property-decorator"],"created_at":"2024-11-11T15:26:56.316Z","updated_at":"2026-05-06T04:33:06.385Z","avatar_url":"https://github.com/daggerok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# typescript-component-decorator-nuxt\nNutx.js TypeScript @Conponent decorator setup (+ Vuetify icons)\n\n## generate new npm project from scratch:\n\n```bash\nmkdir typescript-nuxt-min\ncd typescript-nuxt-min/\nnpm init -y\n```\n\n## IMPORTANT! install dependencies as is!\n\n_dependencies_\n\n```bash\nnpm i -E nuxt vue-property-decorator material-design-icons-iconfont\n```\n\n_devDependencies_\n\n```bash\nnpm i -ED @nuxt/typescript-build @nuxtjs/vuetify css-loader nuxt-webfontloader svg-loader\n```\n\n## add npm-scripts\n\n_package.json_\n\n```json\n{\n \"scripts\": {\n   \"dev\": \"nuxt\",\n   \"build\": \"nuxt build\",\n   \"start\": \"nuxt start\",\n   \"generate\": \"nuxt generate\"\n }\n}\n```\n\n## create typescript config\n\n_tsconfig.json_\n\n```json\n{\n \"compilerOptions\": {\n   \"target\": \"es2018\",\n   \"module\": \"esnext\",\n   \"moduleResolution\": \"node\",\n   \"lib\": [\n     \"esnext\",\n     \"esnext.asynciterable\",\n     \"dom\"\n   ],\n   \"esModuleInterop\": true,\n   \"allowJs\": true,\n   \"sourceMap\": true,\n   \"strict\": true,\n   \"noEmit\": true,\n   \"baseUrl\": \".\",\n   \"paths\": {\n     \"~/*\": [\n       \"./*\"\n     ],\n     \"@/*\": [\n       \"./*\"\n     ]\n   },\n   \"types\": [\n     \"@nuxt/types\",\n     \"vuetify\" /* \u003c-- IMPORTANT */\n   ],\n   \"experimentalDecorators\": true  /* \u003c-- IMPORTANT */\n }\n}\n```\n\n* where `@nuxt/types` should not be installed -- it's already packages together with `@nuxt/typescript-build`.\n* see IMPORTANT lines comments! \n\n_vue-shim.d.ts_\n\n```typescript\ndeclare module '*.vue' {\n  import Vue from 'vue';\n  export default Vue;\n}\n```\n\n## create _nuxt.config.js_ file:\n\n```js\nexport default {\n buildModules: [\n   '@nuxt/typescript-build',\n ],\n}\n```\n\n## create typescript vue layout\n\n_layouts/default.vue_\n\n```vue\n\u003ctemplate\u003e\n  \u003cv-app dark\u003e\n    \u003cv-content\u003e\n      \u003cv-container\u003e\n        \u003cnuxt /\u003e\n      \u003c/v-container\u003e\n    \u003c/v-content\u003e\n    \u003cv-footer :fixed=\"fixed\" app\u003e\n      \u003cspan\u003e\u0026copy; me\u003c/span\u003e\n    \u003c/v-footer\u003e\n  \u003c/v-app\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  import Vue from 'vue';\n\n  export default Vue.extend({\n    name: 'default',\n  });\n\u003c/script\u003e\n```\n\n## create typescript vue component\n\n_components/UserView.vue_\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"app\"\u003e\n    \u003cp\u003eI'm {{ fullName }}, and I'm coding using {{ awesomeThings }}!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e  // \u003c--- THIS lang=\"ts\" IS REALLY IMPORTANT!\nimport { Component, Prop, Vue } from 'vue-property-decorator';\n\ninterface User {\n  firstName: string;\n  lastName: number;\n}\n\n@Component\nexport default class UserView extends Vue {\n  @Prop({ type: Object, required: true })\n  readonly user!: User;\n\n  awesomeThings: string = 'Nuxt.js and TypeScript';\n\n  get fullName(): string {\n    return `${this.user.firstName} ${this.user.lastName}`;\n  }\n}\n\u003c/script\u003e\n```\n\n## create _pages/index.vue` file:\n\n```vue\n\u003ctemplate\u003e\n  \u003cv-layout\u003e\n    \u003cv-flex class=\"text-center\"\u003e\n      \u003ch1\u003eHello World!\u003c/h1\u003e\n      \u003cv-btn\u003e\n        \u003cv-icon\u003eemail\u003c/v-icon\u003e\n      \u003c/v-btn\u003e\n      \u003cUserView :user=\"{firstName: 'Maks', lastName: 'Imko'}\"/\u003e\n    \u003c/v-flex\u003e\n  \u003c/v-layout\u003e\n\u003c/template\u003e\n\u003c!-- THIS lang=\"ts\" IS REALLY IMPORTANT! --\u003e\n\u003cscript lang=\"ts\"\u003e\n  // import { VWindow } from 'vuetify';\n  import { Component, Ref, Vue } from 'vue-property-decorator';\n  import UserView from '~/components/UserView.vue';\n\n  interface User {\n    firstName: string;\n    lastName: number;\n  }\n\n  @Component({\n    components: { UserView }\n  })\n  export default class IndexPage extends Vue {\n    @Ref() readonly userView!: UserView;\n  }\n\u003c/script\u003e\n```\n\n## resources\n\n* https://github.com/vuejs/vue-class-component#undefined-will-not-be-reactive\n* https://github.com/vuetifyjs/vue-cli-plugin-vuetify/issues/112#issuecomment-562935079\n* https://github.com/kaorun343/vue-property-decorator#-refrefkey-string-decorator\n* https://typescript.nuxtjs.org/cookbook/components/#components\n* https://codesandbox.io/s/github/nuxt/typescript/tree/master/examples/options-api/minimal?from-embed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Ftypescript-component-decorator-nuxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaggerok%2Ftypescript-component-decorator-nuxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Ftypescript-component-decorator-nuxt/lists"}