├── netlify.toml
├── .gitignore
├── layouts
    └── default.vue
├── renovate.json
├── middleware
    └── user-agent.ts
├── .eslintrc
├── pages
    ├── index.vue
    ├── class-api.vue
    ├── options-api.vue
    └── composition-api.vue
├── plugins
    └── truncate.ts
├── .github
    ├── workflows
    │   └── main.yml
    └── ISSUE_TEMPLATE
    │   └── bug_report.md
├── tsconfig.json
├── package.json
├── nuxt.config.ts
├── store
    ├── index.ts
    └── setting.ts
├── LICENSE
├── init.sh
└── README.md


/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "dist/"
3 |   command = "npm run generate"
4 |   environment = { NODE_VERSION = "12" }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 |   name: 'LayoutDefault'
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "config:base"
 4 |   ],
 5 |   "packageRules": [
 6 |     {
 7 |       "packageNames": ["nuxt", "@nuxt/types", "@nuxt/typescript-build", "@nuxt/typescript-runtime"],
 8 |       "groupName": "Nuxt TypeScript core packages"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/middleware/user-agent.ts:
--------------------------------------------------------------------------------
 1 | import type { Context, Middleware } from '@nuxt/types'
 2 | 
 3 | declare module '@nuxt/types' {
 4 |   interface Context {
 5 |     userAgent?: string
 6 |   }
 7 | }
 8 | 
 9 | const userAgentMiddleware: Middleware = (context: Context) => {
10 |   context.userAgent = process.server ? (context.req?.headers['user-agent'] ?? 'Unknown') : navigator.userAgent
11 | }
12 | 
13 | export default userAgentMiddleware
14 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   'parser': 'vue-eslint-parser',
 3 |   'extends': [
 4 |     '@nuxtjs/eslint-config-typescript',
 5 |     'plugin:@typescript-eslint/recommended',
 6 |     'plugin:vue/recommended'
 7 |   ],
 8 |   'rules': {
 9 |     '@typescript-eslint/explicit-function-return-type': ['error'],
10 |     'lines-between-class-members': ['error', 'always', { 'exceptAfterSingleLine': true }],
11 |     'space-before-function-paren': ['error'],
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main>
 3 |     <ul>
 4 |       <li
 5 |         v-for="page in ['Options API', 'Class API', 'Composition API']"
 6 |         :key="page"
 7 |       >
 8 |         <nuxt-link :to="`/${page.toLowerCase().split(' ').join('-')}`">
 9 |           With {{ page }}
10 |         </nuxt-link>
11 |       </li>
12 |     </ul>
13 |   </main>
14 | </template>
15 | 
16 | <script lang="ts">
17 | export default {
18 |   name: 'PageIndex'
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/plugins/truncate.ts:
--------------------------------------------------------------------------------
 1 | import type { Plugin } from '@nuxt/types'
 2 | 
 3 | type Truncater = (text: string) => string
 4 | 
 5 | declare module 'vue/types/vue' {
 6 |   interface Vue {
 7 |     $truncate: Truncater
 8 |   }
 9 | }
10 | 
11 | const truncater: Truncater = (text: string) => text.length > 15 ? text.substring(0, 15) : text
12 | 
13 | const truncatePlugin: Plugin = (_context, inject) => {
14 |   inject('truncate', truncater)
15 | }
16 | 
17 | export default truncatePlugin
18 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ main ]
 6 |   pull_request:
 7 |     branches: [ main ]
 8 | 
 9 | jobs:
10 |   build:
11 |     runs-on: ubuntu-latest
12 | 
13 |     strategy:
14 |       matrix:
15 |         api: [options, class, composition]
16 | 
17 |     steps:
18 |       - uses: actions/checkout@v3
19 | 
20 |       - name: Run initializing script
21 |         run: COMPONENT_API=${{ matrix.api }} ./init.sh
22 | 
23 |       - run: npm install
24 | 
25 |       - name: Run lint
26 |         run: npm run lint
27 | 
28 |       - name: Run static site generation
29 |         run: npm run generate
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "moduleResolution": "node",
 6 |     "lib": [
 7 |       "esnext",
 8 |       "esnext.asynciterable",
 9 |       "dom"
10 |     ],
11 |     "esModuleInterop": true,
12 |     "experimentalDecorators": true,
13 |     "sourceMap": true,
14 |     "strict": true,
15 |     "noEmit": true,
16 |     "baseUrl": ".",
17 |     "importsNotUsedAsValues": "preserve",
18 |     "paths": {
19 |       "~/*": ["./*"],
20 |       "@/*": ["./*"]
21 |     },
22 |     "types": [
23 |       "@types/node",
24 |       "@nuxt/types"
25 |     ]
26 |   },
27 |   "exclude": [
28 |     "node_modules"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-community-typescript-template",
 3 |   "description": "A boilerplate to start a Nuxt+TS project quickly",
 4 |   "version": "2.15.8",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@nuxtjs/composition-api": "0.32.0",
 8 |     "nuxt-property-decorator": "2.9.1",
 9 |     "nuxt": "2.15.8"
10 |   },
11 |   "scripts": {
12 |     "dev": "nuxt",
13 |     "build": "nuxt build",
14 |     "start": "nuxt start",
15 |     "generate": "nuxt generate",
16 |     "lint": "eslint --max-warnings 0 --ext .ts,.vue ."
17 |   },
18 |   "devDependencies": {
19 |     "@nuxt/types": "2.15.8",
20 |     "@nuxt/typescript-build": "2.1.0",
21 |     "@nuxtjs/eslint-config-typescript": "10.0.0",
22 |     "eslint": "8.15.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NuxtConfig } from '@nuxt/types'
 2 | 
 3 | const config: NuxtConfig = {
 4 |   build: {},
 5 |   buildModules: [
 6 |     '@nuxtjs/composition-api/module',
 7 |     '@nuxt/typescript-build'
 8 |   ],
 9 |   css: [],
10 |   env: {},
11 |   head: {
12 |     title: 'nuxt-community/typescript-template',
13 |     meta: [
14 |       { charset: 'utf-8' },
15 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
16 |       { hid: 'description', name: 'description', content: 'A boilerplate to start a Nuxt+TS project quickly' }
17 |     ],
18 |     link: []
19 |   },
20 |   loading: { color: '#0c64c1' },
21 |   modules: [],
22 |   plugins: [
23 |     '~/plugins/truncate'
24 |   ]
25 | }
26 | 
27 | export default config
28 | 


--------------------------------------------------------------------------------
/store/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Context } from '@nuxt/types'
 2 | import type { GetterTree, ActionTree, MutationTree } from 'vuex'
 3 | 
 4 | export interface RootState {
 5 |   description: string
 6 | }
 7 | 
 8 | export const state = (): RootState => ({
 9 |   description: "I'm defined as an initial state"
10 | })
11 | 
12 | export const getters: GetterTree<RootState, RootState> = {
13 |   reversedName: (state): string => state.description.split('').reverse().join('')
14 | }
15 | 
16 | export const MutationType = {
17 |   CHANGE_DESCRIPTION: 'changeDescription'
18 | }
19 | 
20 | export const mutations: MutationTree<RootState> = {
21 |   [MutationType.CHANGE_DESCRIPTION]: (state, newDescription: string) => { state.description = newDescription }
22 | }
23 | 
24 | export const actions: ActionTree<RootState, RootState> = {
25 |   nuxtServerInit ({ commit }, _context: Context) {
26 |     commit(MutationType.CHANGE_DESCRIPTION, "I'm defined by server side")
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | ## Version
11 | 
12 | ## Reproduction link
13 | 
14 | If the repro does not need a build setup, please provide a link to a [JSFiddle](https://jsfiddle.net/), [JSBin](https://jsbin.com/), or [CodePen](https://codepen.io/). If it requires a build setup, you can use [CodeSandbox](https://codesandbox.io/) or provide a GitHub repo.
15 | 
16 | ### Steps to reproduce
17 | 
18 | What do we need to do after opening your repro in order to make the bug happen? Clear and concise reproduction instructions are important for us to be able to triage your issue in a timely manner.
19 | 
20 | ## What is expected?
21 | 
22 | A clear and concise description of what you expected to happen.
23 | 
24 | ## What is actually happening?
25 | 
26 | ## Additional context/comments
27 | 
28 | Add any other context/comments about the problem here.
29 | 


--------------------------------------------------------------------------------
/store/setting.ts:
--------------------------------------------------------------------------------
 1 | import type { Context } from '@nuxt/types'
 2 | import type { GetterTree, ActionTree, MutationTree } from 'vuex'
 3 | import type { RootState } from './index'
 4 | 
 5 | export const namespace = 'setting'
 6 | 
 7 | export interface SettingState {
 8 |   darkMode: boolean
 9 | }
10 | 
11 | export const state = (): SettingState => ({
12 |   darkMode: false
13 | })
14 | 
15 | export const getters: GetterTree<SettingState, RootState> = {
16 | }
17 | 
18 | export const MutationType = {
19 |   CHANGE_DARK_MODE: 'changeDarkMode'
20 | }
21 | 
22 | export const mutations: MutationTree<SettingState> = {
23 |   [MutationType.CHANGE_DARK_MODE]: (state, newMode: boolean) => { state.darkMode = newMode }
24 | }
25 | 
26 | export const actionType = {
27 |   TOGGLE_DARK_MODE: 'toggleDarkMode'
28 | }
29 | 
30 | export const actions: ActionTree<SettingState, RootState> = {
31 |   nuxtServerInit ({ commit }, _context: Context) {
32 |     commit(MutationType.CHANGE_DARK_MODE, true)
33 |   },
34 | 
35 |   [actionType.TOGGLE_DARK_MODE] ({ commit, state }) {
36 |     commit(MutationType.CHANGE_DARK_MODE, !state.darkMode)
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Kengo Hamasaki, Nuxt Team
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/init.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | delete_composition()
 4 | {
 5 |   rm pages/composition-api.vue
 6 |   sed -i.bak '/@nuxtjs\/composition-api/d' package.json
 7 |   sed -i.bak '/@nuxtjs\/composition-api/d' nuxt.config.ts
 8 |   sed -i.bak "s/'Composition API'//" pages/index.vue
 9 | }
10 | 
11 | delete_class()
12 | {
13 |   rm pages/class-api.vue
14 |   sed -i.bak '/nuxt-property-decorator/d' package.json
15 |   sed -i.bak "s/'Class API', //" pages/index.vue
16 | }
17 | 
18 | delete_options()
19 | {
20 |   rm pages/options-api.vue
21 |   sed -i.bak "s/'Options API', //" pages/index.vue
22 | }
23 | 
24 | use_options()
25 | {
26 |   delete_composition
27 |   delete_class
28 | }
29 | 
30 | use_class()
31 | {
32 |   delete_composition
33 |   delete_options
34 | }
35 | 
36 | use_composition()
37 | {
38 |   delete_class
39 |   delete_options
40 | }
41 | 
42 | case $COMPONENT_API in
43 |   options ) use_options;;
44 |   class ) use_class;;
45 |   compositon ) use_composition;;
46 |   *)
47 |     echo "Which component style do you prefer?"
48 |     select choice in "Options API" "Class API" "Composition API"; do
49 |       case $choice in
50 |         'Options API' )     use_options; break;;
51 |         'Class API' )       use_class; break;;
52 |         'Composition API' ) use_composition; break;;
53 |       esac
54 |     done
55 |     ;;
56 | esac
57 | 
58 | rm -f package.json.bak nuxt.config.ts.bak pages/index.vue.bak init.sh
59 | 
60 | echo "Initialized with your choice!\n\nRun npm/yarn install, then commit all changes"
61 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt TypeScript starter template
 2 | 
 3 | A [Nuxt 2](https://github.com/nuxt/nuxt.js) + [@nuxt/typescript](https://github.com/nuxt/typescript) starter project template.
 4 | 
 5 | ## Setup
 6 | 
 7 | Create your repository by [Use this template](https://github.com/nuxt-community/typescript-template/generate) button from [this template](https://github.com/nuxt-community/typescript-template) and clone into your local.
 8 | 
 9 | Then, run below command and follow its message.
10 | 
11 | ```
12 | ./init.sh
13 | ```
14 | 
15 | The command will ask your preference for the API to write Vue component among:
16 | 
17 | - Options API
18 | - Class API with with nuxt-property-decorator
19 | - Composition API (Experimental) with [@nuxt/composition-api](https://github.com/nuxt-community/composition-api)
20 | 
21 | ## Usage
22 | 
23 | ### Run Development server
24 | 
25 | ```sh
26 | npm run dev
27 | ```
28 | 
29 | Go to [http://localhost:3000](http://localhost:3000)
30 | 
31 | ### Build/Run SSR enabled application
32 | 
33 | ```sh
34 | npm run build
35 | npm start
36 | ```
37 | 
38 | ### Static Generation
39 | 
40 | [![Netlify Status](https://api.netlify.com/api/v1/badges/e5bf3478-1cb8-44c4-8aeb-040083bd39ca/deploy-status)](https://nuxt-ts-template.netlify.com/)
41 | 
42 | ```sh
43 | npm run generate #=> Then distribute /dist
44 | ```
45 | 
46 | ## FAQ
47 | 
48 | - Q. How about providing sample usage of "xyz" (The name of OSS which you want to use)?
49 |   - A. Recommend running into [create-nuxt-app](https://github.com/nuxt/create-nuxt-app). This template aims to provide a minimal sample that follows the latest version of Nuxt.js and [@nuxt/typescript](https://github.com/nuxt/typescript). 
50 | - Q. I think the usage of Vuex is not typed enough...?
51 |   - A. We know! We desire the next major version of Vuex (v4) saves our bacon.
52 | 
53 | ## Miss the old way of this repository?
54 | 
55 | That still alives on [master](https://github.com/nuxt-community/typescript-template/tree/master) branch.
56 | 


--------------------------------------------------------------------------------
/pages/class-api.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main>
  3 |     <h1>With Class API</h1>
  4 |     <h2>data ()</h2>
  5 |     <p>
  6 |       {{ message }}
  7 |     </p>
  8 |     <h2>computed ()</h2>
  9 |     <p>
 10 |       {{ computedMessage }}
 11 |     </p>
 12 |     <h2>asyncData ()</h2>
 13 |     <p>
 14 |       {{ asyncMessage }}
 15 |     </p>
 16 |     <h2>fetch ()</h2>
 17 |     <p v-if="$fetchState.pending">
 18 |       Fetching from frontend...
 19 |     </p>
 20 |     <ul v-else>
 21 |       <li
 22 |         v-for="todo in fetchedTodos.slice(0, 5)"
 23 |         :key="todo.id"
 24 |       >
 25 |         {{ todo.completed ? '&#9989;' : '&#11036;' }} {{ todo.id }}: {{ todo.title }}
 26 |       </li>
 27 |     </ul>
 28 |     <h2>Vuex Store</h2>
 29 |     <ul>
 30 |       <li>On root store: {{ descriptionOnStore }}</li>
 31 |       <li>On setting store (namespaced): dark mode is <strong>{{ isDarkMode ? 'enabled' : 'disabled' }}</strong></li>
 32 |       <a
 33 |         href
 34 |         @click.prevent="toggleDarkMode"
 35 |       >
 36 |         Toggle dark mode
 37 |       </a>
 38 |     </ul>
 39 |     <h2>Nuxt Middleware</h2>
 40 |     <p>{{ userAgent }}</p>
 41 |     <h2>Nuxt Plugin</h2>
 42 |     <p>{{ $truncate(userAgent) }}</p>
 43 |   </main>
 44 | </template>
 45 | 
 46 | <script lang="ts">
 47 | import { Component, Vue, namespace, State } from 'nuxt-property-decorator'
 48 | import type { MetaInfo } from 'vue-meta'
 49 | 
 50 | import type { RootState } from '~/store'
 51 | import { namespace as settingStoreNamespace, SettingState, actionType } from '~/store/setting'
 52 | 
 53 | interface ToDo {
 54 |   userId: number
 55 |   id: number
 56 |   title: string
 57 |   completed: boolean
 58 | }
 59 | 
 60 | const SettingStore = namespace(settingStoreNamespace)
 61 | 
 62 | @Component({
 63 |   fetchOnServer: false,
 64 |   middleware: 'user-agent',
 65 |   asyncData (context) {
 66 |     return {
 67 |       asyncMessage: "I'm defined on asyncData()",
 68 |       userAgent: context.userAgent
 69 |     }
 70 |   },
 71 |   fetch (this: ClassApi) {
 72 |     return fetch('https://jsonplaceholder.typicode.com/todos')
 73 |       .then(response => response.json())
 74 |       .then((data: ToDo[]) => { this.fetchedTodos = data })
 75 |   },
 76 |   head (this: ClassApi): MetaInfo {
 77 |     return {
 78 |       title: 'Class API Demo',
 79 |       meta: [{
 80 |         name: 'message',
 81 |         content: this.computedMessage
 82 |       }]
 83 |     }
 84 |   }
 85 | })
 86 | export default class ClassApi extends Vue {
 87 |   @State('description') descriptionOnStore!: RootState['description']
 88 |   @SettingStore.Action(actionType.TOGGLE_DARK_MODE) toggleDarkMode!: () => void
 89 |   @SettingStore.State('darkMode') isDarkMode!: SettingState['darkMode']
 90 | 
 91 |   message = "I'm defined on data()"
 92 |   fetchedTodos: ToDo[] = []
 93 |   asyncMessage = 'I will be overwritten by asyncData'
 94 |   userAgent = 'I will be overwritten by asyncData'
 95 | 
 96 |   get computedMessage (): string {
 97 |     return this.message.replace('data()', 'computed()')
 98 |   }
 99 | }
100 | </script>
101 | 


--------------------------------------------------------------------------------
/pages/options-api.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main>
  3 |     <h1>With Options API</h1>
  4 |     <h2>data ()</h2>
  5 |     <p>
  6 |       {{ message }}
  7 |     </p>
  8 |     <h2>computed ()</h2>
  9 |     <p>
 10 |       {{ computedMessage }}
 11 |     </p>
 12 |     <h2>asyncData ()</h2>
 13 |     <p>
 14 |       {{ asyncMessage }}
 15 |     </p>
 16 |     <h2>fetch ()</h2>
 17 |     <p v-if="$fetchState.pending">
 18 |       Fetching from frontend...
 19 |     </p>
 20 |     <ul v-else>
 21 |       <li
 22 |         v-for="todo in fetchedTodos.slice(0, 5)"
 23 |         :key="todo.id"
 24 |       >
 25 |         {{ todo.completed ? '&#9989;' : '&#11036;' }} {{ todo.id }}: {{ todo.title }}
 26 |       </li>
 27 |     </ul>
 28 |     <h2>Vuex Store</h2>
 29 |     <ul>
 30 |       <li>On root store: {{ descriptionOnStore }}</li>
 31 |       <li>On setting store (namespaced): dark mode is <strong>{{ isDarkMode ? 'enabled' : 'disabled' }}</strong></li>
 32 |       <a
 33 |         href
 34 |         @click.prevent="toggleDarkMode"
 35 |       >
 36 |         Toggle dark mode
 37 |       </a>
 38 |     </ul>
 39 |     <h2>Nuxt Middleware</h2>
 40 |     <p>{{ userAgent }}</p>
 41 |     <h2>Nuxt Plugin</h2>
 42 |     <p>{{ $truncate(userAgent) }}</p>
 43 |   </main>
 44 | </template>
 45 | 
 46 | <script lang="ts">
 47 | import Vue from 'vue'
 48 | import type { MetaInfo } from 'vue-meta'
 49 | import { mapActions, mapState } from 'vuex'
 50 | 
 51 | import type { RootState } from '~/store'
 52 | import { actionType, namespace as settingStoreNamespace, SettingState } from '~/store/setting'
 53 | 
 54 | interface ToDo {
 55 |   userId: number
 56 |   id: number
 57 |   title: string
 58 |   completed: boolean
 59 | }
 60 | 
 61 | export default Vue.extend({
 62 |   fetchOnServer: false,
 63 |   middleware: 'user-agent',
 64 | 
 65 |   asyncData (context) {
 66 |     return {
 67 |       asyncMessage: "I'm defined on asyncData()",
 68 |       userAgent: context.userAgent
 69 |     }
 70 |   },
 71 | 
 72 |   data () {
 73 |     return {
 74 |       message: "I'm defined on data()",
 75 |       fetchedTodos: [] as ToDo[]
 76 |     }
 77 |   },
 78 | 
 79 |   fetch () {
 80 |     return fetch('https://jsonplaceholder.typicode.com/todos')
 81 |       .then(response => response.json())
 82 |       .then((data: ToDo[]) => { this.fetchedTodos = data })
 83 |   },
 84 | 
 85 |   head (): MetaInfo {
 86 |     return {
 87 |       title: 'Options API Demo',
 88 |       meta: [{
 89 |         name: 'message',
 90 |         content: this.computedMessage
 91 |       }]
 92 |     }
 93 |   },
 94 | 
 95 |   computed: {
 96 |     computedMessage (): string {
 97 |       return this.message.replace('data()', 'computed()')
 98 |     },
 99 | 
100 |     ...mapState({
101 |       descriptionOnStore: state => (state as RootState).description
102 |     }),
103 | 
104 |     ...mapState(settingStoreNamespace, {
105 |       isDarkMode: state => (state as SettingState).darkMode
106 |     })
107 |   },
108 | 
109 |   methods: {
110 |     ...mapActions(settingStoreNamespace, {
111 |       toggleDarkMode: actionType.TOGGLE_DARK_MODE
112 |     })
113 |   }
114 | })
115 | </script>
116 | 


--------------------------------------------------------------------------------
/pages/composition-api.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main>
  3 |     <h1>With Composition API <small>*Experimental</small></h1>
  4 |     <h2>data ()</h2>
  5 |     <p>
  6 |       {{ message }}
  7 |     </p>
  8 |     <h2>computed ()</h2>
  9 |     <p>
 10 |       {{ computedMessage }}
 11 |     </p>
 12 |     <h2>asyncData ()</h2>
 13 |     <p>
 14 |       {{ asyncMessage }}
 15 |     </p>
 16 |     <h2>fetch ()</h2>
 17 |     <p v-if="fetchState.pending || !fetchState.timestamp">
 18 |       Fetching from frontend...
 19 |     </p>
 20 |     <ul v-else>
 21 |       <li
 22 |         v-for="todo in fetchedTodos.slice(0, 5)"
 23 |         :key="todo.id"
 24 |       >
 25 |         {{ todo.completed ? '&#9989;' : '&#11036;' }} {{ todo.id }}: {{ todo.title }}
 26 |       </li>
 27 |     </ul>
 28 |     <h2>Vuex Store</h2>
 29 |     <ul>
 30 |       <li>On root store: {{ descriptionOnStore }}</li>
 31 |       <li>On setting store (namespaced): dark mode is <strong>{{ isDarkMode ? 'enabled' : 'disabled' }}</strong></li>
 32 |       <a
 33 |         href
 34 |         @click.prevent="toggleDarkMode"
 35 |       >
 36 |         Toggle dark mode
 37 |       </a>
 38 |     </ul>
 39 |     <h2>Nuxt Middleware</h2>
 40 |     <p>{{ userAgent }}</p>
 41 |     <h2>Nuxt Plugin</h2>
 42 |     <p>{{ $truncate(userAgent || '') }}</p>
 43 |   </main>
 44 | </template>
 45 | 
 46 | <script lang="ts">
 47 | import { computed, defineComponent, ref, useAsync, useContext, useFetch, useMeta } from '@nuxtjs/composition-api'
 48 | 
 49 | import type { RootState } from '~/store'
 50 | import { namespace as settingStoreNamespace, SettingState, actionType } from '~/store/setting'
 51 | 
 52 | interface ToDo {
 53 |   userId: number
 54 |   id: number
 55 |   title: string
 56 |   completed: boolean
 57 | }
 58 | 
 59 | export default defineComponent({
 60 |   fetchOnServer: false,
 61 |   middleware: 'user-agent',
 62 | 
 63 |   setup (_props, context) {
 64 |     const message = ref("I'm defined on data()")
 65 |     const fetchedTodos = ref<ToDo[]>([])
 66 | 
 67 |     const descriptionOnStore = computed(() => (context.root.$store.state as RootState).description)
 68 |     const computedMessage = computed(() => message.value.replace('data()', 'computed()'))
 69 |     const isDarkMode = computed(() => (context.root.$store.state.setting as SettingState).darkMode)
 70 | 
 71 |     const toggleDarkMode = (): void => {
 72 |       context.root.$store.dispatch(`${settingStoreNamespace}/${actionType.TOGGLE_DARK_MODE}`)
 73 |     }
 74 | 
 75 |     const asyncMessage = useAsync(() => "I'm defined on asyncData()")
 76 |     const userAgent = useAsync(() => useContext().userAgent)
 77 | 
 78 |     const { fetchState } = useFetch(() => {
 79 |       return window.fetch('https://jsonplaceholder.typicode.com/todos')
 80 |         .then(response => response.json())
 81 |         .then((data: ToDo[]) => { fetchedTodos.value = data })
 82 |     })
 83 | 
 84 |     useMeta(() => ({
 85 |       title: 'Composition API Demo',
 86 |       meta: [{
 87 |         name: 'message',
 88 |         content: computedMessage.value
 89 |       }]
 90 |     }))
 91 | 
 92 |     return {
 93 |       message,
 94 |       asyncMessage,
 95 |       userAgent,
 96 |       fetchState,
 97 |       fetchedTodos,
 98 |       toggleDarkMode,
 99 |       descriptionOnStore,
100 |       computedMessage,
101 |       isDarkMode
102 |     }
103 |   },
104 | 
105 |   head: {}
106 | })
107 | </script>
108 | 


--------------------------------------------------------------------------------