https://github.com/daggerok/typescript-nuxt-min
Minimal NuxtJS TypeScript example starter project using Options, Class and Composition APIs (see branches) https://daggerok.github.io/typescript-nuxt-min/
https://github.com/daggerok/typescript-nuxt-min
class-api composition-api nuxt nuxt-template nuxt-ts nuxt-typescript nuxtjs nuxtjs-template options-api
Last synced: about 1 year ago
JSON representation
Minimal NuxtJS TypeScript example starter project using Options, Class and Composition APIs (see branches) https://daggerok.github.io/typescript-nuxt-min/
- Host: GitHub
- URL: https://github.com/daggerok/typescript-nuxt-min
- Owner: daggerok
- License: mit
- Created: 2019-12-19T22:10:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-05T19:56:40.000Z (over 1 year ago)
- Last Synced: 2025-01-10T00:41:36.737Z (about 1 year ago)
- Topics: class-api, composition-api, nuxt, nuxt-template, nuxt-ts, nuxt-typescript, nuxtjs, nuxtjs-template, options-api
- Language: JavaScript
- Homepage:
- Size: 301 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# typescript-nuxt-min [](https://github.com/daggerok/typescript-nuxt-min/actions?query=workflow%3ACI) [](https://travis-ci.org/daggerok/typescript-nuxt-min)
Minimal NuxtJS TypeScript example starter project using Options, Class and Composition APIs (see branches)
## Table of Contents
* [Options API](#options-api)
* [Class API](#class-api)
* [Composition API](#composition-api)
* [Resources](#resources)
## Options API
see [Options API](https://github.com/daggerok/typescript-nuxt-min/tree/options-api) branch.
1. generate new npm project from scratch:
```bash
mkdir typescript-nuxt-min
cd typescript-nuxt-min/
npm init -y
```
1. IMPORTANT: install nux as dependency (not as devDependency!)
```bash
npm i -E nuxt
```
1. install `@nuxt/typescript-build` as dev dependency:
```bash
npm i -ED @nuxt/typescript-build
```
1. add npm-scripts in _package.json_ file:
```json
{
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
}
```
1. create _tsconfig.json_ file:
```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"
]
}
}
```
whre `@nuxt/types` should not be installed - it's already packages together with `@nuxt/typescript-build`.
1. create _nuxt.config.js_ file:
```js
export default {
buildModules: [
'@nuxt/typescript-build',
],
}
```
1. create _pages/index.vue_ file:
```vue
Hello, {{ id }}!
// <--- THIS lang="ts" IS REALLY IMPORTANT!
import Vue from 'vue';
export default Vue.extend({
data() {
const id: string = 'TypeScript';
return {
id,
};
}
});
```
1. start development:
```bash
npm run dev
```
1. open http://127.0.0.1:3000/
1. build and run:
```bash
npm run build
npx serve dist
```
1. open http://127.0.0.1:5000/
1. GitHub Pages deployment located [here](https://daggerok.github.io/typescript-nuxt-min/)
## Class API
see [Class API](https://github.com/daggerok/typescript-nuxt-min/tree/class-api) branch.
## Composition API
see [Composition API](https://github.com/daggerok/typescript-nuxt-min/tree/composition-api) branch.
## resources
* [typescript.nuxtjs.org documentation](https://typescript.nuxtjs.org/cookbook/components/)
* [examples repository](https://github.com/nuxt/typescript/blob/master/examples/)
* https://codesandbox.io/s/github/nuxt/typescript/tree/master/examples/options-api/minimal?from-embed