https://github.com/daggerok/typescript-component-decorator-nuxt
Nuxt.js TypeScript @Component decorator project from scratch + Vuetify
https://github.com/daggerok/typescript-component-decorator-nuxt
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
Last synced: 3 months ago
JSON representation
Nuxt.js TypeScript @Component decorator project from scratch + Vuetify
- Host: GitHub
- URL: https://github.com/daggerok/typescript-component-decorator-nuxt
- Owner: daggerok
- License: mit
- Created: 2019-12-20T00:11:32.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-05T19:54:25.000Z (10 months ago)
- Last Synced: 2025-01-10T00:41:35.243Z (4 months ago)
- 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
- Language: JavaScript
- Size: 14.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# typescript-component-decorator-nuxt
Nutx.js TypeScript @Conponent decorator setup (+ Vuetify icons)
## generate new npm project from scratch:
```bash
mkdir typescript-nuxt-min
cd typescript-nuxt-min/
npm init -y
```
## IMPORTANT! install dependencies as is!
_dependencies_
```bash
npm i -E nuxt vue-property-decorator material-design-icons-iconfont
```
_devDependencies_
```bash
npm i -ED @nuxt/typescript-build @nuxtjs/vuetify css-loader nuxt-webfontloader svg-loader
```
## add npm-scripts
_package.json_
```json
{
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
}
```
## create typescript config
_tsconfig.json_
```json
{
"compilerOptions": {
"target": "es2018",
"module": "esnext",
"moduleResolution": "node",
"lib": [
"esnext",
"esnext.asynciterable",
"dom"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@nuxt/types",
"vuetify" /* <-- IMPORTANT */
],
"experimentalDecorators": true /* <-- IMPORTANT */
}
}
```
* where `@nuxt/types` should not be installed -- it's already packages together with `@nuxt/typescript-build`.
* see IMPORTANT lines comments!
_vue-shim.d.ts_
```typescript
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
```
## create _nuxt.config.js_ file:
```js
export default {
buildModules: [
'@nuxt/typescript-build',
],
}
```
## create typescript vue layout
_layouts/default.vue_
```vue
© me
import Vue from 'vue';
export default Vue.extend({
name: 'default',
});
```
## create typescript vue component
_components/UserView.vue_
```vue
I'm {{ fullName }}, and I'm coding using {{ awesomeThings }}!
// <--- THIS lang="ts" IS REALLY IMPORTANT!
import { Component, Prop, Vue } from 'vue-property-decorator';
interface User {
firstName: string;
lastName: number;
}
@Component
export default class UserView extends Vue {
@Prop({ type: Object, required: true })
readonly user!: User;
awesomeThings: string = 'Nuxt.js and TypeScript';
get fullName(): string {
return `${this.user.firstName} ${this.user.lastName}`;
}
}
```
## create _pages/index.vue` file:
```vue
Hello World!
email
// import { VWindow } from 'vuetify';
import { Component, Ref, Vue } from 'vue-property-decorator';
import UserView from '~/components/UserView.vue';
interface User {
firstName: string;
lastName: number;
}
@Component({
components: { UserView }
})
export default class IndexPage extends Vue {
@Ref() readonly userView!: UserView;
}
```
## resources
* https://github.com/vuejs/vue-class-component#undefined-will-not-be-reactive
* https://github.com/vuetifyjs/vue-cli-plugin-vuetify/issues/112#issuecomment-562935079
* https://github.com/kaorun343/vue-property-decorator#-refrefkey-string-decorator
* https://typescript.nuxtjs.org/cookbook/components/#components
* https://codesandbox.io/s/github/nuxt/typescript/tree/master/examples/options-api/minimal?from-embed