typescript-nuxt-min

Minimal NuxtJS TypeScript example starter project using Options, Class and Composition APIs (see branches)

Table of Contents

• Options API
• Class API
• Composition API
• Resources

Options API

see Options API branch.

1. generate new npm project from scratch:

   mkdir typescript-nuxt-min
   cd typescript-nuxt-min/
   npm init -y

2. IMPORTANT: install nux as dependency (not as devDependency!)

   npm i -E nuxt

3. install @nuxt/typescript-build as dev dependency:

   npm i -ED @nuxt/typescript-build

4. add npm-scripts in package.json file:

   {
     "scripts": {
       "dev": "nuxt",
       "build": "nuxt build",
       "start": "nuxt start",
       "generate": "nuxt generate"
     }
   }

5. create tsconfig.json file:

   {
     "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.
6. create nuxt.config.js file:

   export default {
     buildModules: [
       '@nuxt/typescript-build',
     ],
   }

7. create pages/index.vue file:

   <template>
     <div class="app">
       <h1>Hello, {{ id }}!</h1>
     </div>
   </template>
   <script lang="ts"> // <--- THIS lang="ts" IS REALLY IMPORTANT!
     import Vue from 'vue';
     export default Vue.extend({
       data() {
         const id: string = 'TypeScript';
         
         return {
           id,
         };
       }
     });
   </script>

8. start development:

   npm run dev

9. open http://127.0.0.1:3000/
10. build and run:

    npm run build
    npx serve dist

11. open http://127.0.0.1:5000/
12. GitHub Pages deployment located here

Class API

see Class API branch.

Composition API

see Composition API branch.

resources

• typescript.nuxtjs.org documentation
• examples repository
• https://codesandbox.io/s/github/nuxt/typescript/tree/master/examples/options-api/minimal?from-embed