feat: add composition-api to features

README.md

@@ -56,6 +56,7 @@ yarn create nuxt-app <my-project>
     - [Axios - Promise based HTTP client](https://github.com/nuxt-community/axios-module)
     - [Progressive Web App (PWA)](https://github.com/nuxt-community/pwa-module)
     - [Content - Git-based headless CMS](https://github.com/nuxt/content)
+    - [Composition API - with Nuxt-specific features](https://composition-api.nuxtjs.org/)
 1. Linting tools:
     - [ESLint](https://github.com/nuxt/eslint-config)
     - [Prettier](https://github.com/prettier/prettier)

packages/cna-template/template/nuxt/nuxt.config.js

@@ -102,6 +102,10 @@
     // https://go.nuxtjs.dev/vuetify
     '@nuxtjs/vuetify',
     <%_ } _%>
+    <%_ if (composition) { _%>
+    // https://composition-api.nuxtjs.org/
+    '@nuxtjs/composition-api/module',
+    <%_ } _%>
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules

packages/cna-template/template/nuxt/package.js

@@ -74,6 +74,9 @@ module.exports = {
     if (!features.includes('content')) {
       delete pkg.dependencies['@nuxt/content']
     }
+    if (!features.includes('composition')) {
+      delete pkg.dependencies['@nuxtjs/composition-api']
+    }
 
     // TS
     const typescript = language.includes('ts')

packages/cna-template/template/nuxt/package.json

@@ -13,6 +13,7 @@
     "*.{css,vue}": "stylelint"
   },
   "dependencies": {
+    "@nuxtjs/composition-api": "^0.24.2",
     "@nuxt/content": "^1.14.0",
     "@nuxtjs/axios": "^5.13.5",
     "@nuxtjs/pwa": "^3.3.5",

packages/cna-template/template/nuxt/pages/index.vue

@@ -29,6 +29,15 @@
 
 <%_ if (typescript) { _%>
 <script lang="ts">
+<%_ } else { _%>
+<script>
+<%_ } _%>
+<%_ if (composition) { _%>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({})
+</script>
+<%_ } else if (typescript) { _%>
 import Vue from 'vue'
 
 export default Vue.extend({})

packages/create-nuxt-app/lib/prompts.js

@@ -56,7 +56,8 @@ module.exports = [
     choices: [
       { name: 'Axios - Promise based HTTP client', value: 'axios' },
       { name: 'Progressive Web App (PWA)', value: 'pwa' },
-      { name: 'Content - Git-based headless CMS', value: 'content' }
+      { name: 'Content - Git-based headless CMS', value: 'content' },
+      { name: 'Composition API - with Nuxt-specific features', value: 'composition' }
     ],
     default: []
   },

packages/create-nuxt-app/lib/saofile.js

@@ -24,6 +24,7 @@ module.exports = {
     const commitlint = this.answers.linter.includes('commitlint')
     const axios = this.answers.features.includes('axios')
     const content = this.answers.features.includes('content')
+    const composition = this.answers.features.includes('composition')
     const pm = this.answers.pm === 'yarn' ? 'yarn' : 'npm'
     const pmRun = this.answers.pm === 'yarn' ? 'yarn' : 'npm run'
     const { cliOptions = {} } = this.sao.opts
@@ -42,6 +43,7 @@ module.exports = {
       pm,
       pmRun,
       content,
+      composition,
       isWindows
     }
   },

packages/create-nuxt-app/test/snapshots/index.test.js.md

@@ -1829,7 +1829,7 @@ Generated by [AVA](https://avajs.dev).
     }␊
     `
 
-## verify features: Axios - Promise based HTTP client, Progressive Web App (PWA), Content - Git-based headless CMS
+## verify features: Axios - Promise based HTTP client, Progressive Web App (PWA), Content - Git-based headless CMS, Composition API - with Nuxt-specific features
 
 > Generated files
 
@@ -1861,6 +1861,7 @@ Generated by [AVA](https://avajs.dev).
       dependencies: {
         '@nuxt/content': '^1.14.0',
         '@nuxtjs/axios': '^5.13.5',
+        '@nuxtjs/composition-api': '^0.24.2',
         '@nuxtjs/pwa': '^3.3.5',
         'core-js': '^3.13.0',
         nuxt: '^2.15.6',
@@ -1905,6 +1906,8 @@ Generated by [AVA](https://avajs.dev).
     ␊
       // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules␊
       buildModules: [␊
+        // https://composition-api.nuxtjs.org/␊
+        '@nuxtjs/composition-api/module',␊
       ],␊
     ␊
       // Modules: https://go.nuxtjs.dev/config-modules␊
@@ -2215,6 +2218,95 @@ Generated by [AVA](https://avajs.dev).
     }␊
     `
 
+## verify features: Composition API - with Nuxt-specific features
+
+> Generated files
+
+    [
+      '.editorconfig',
+      '.gitignore',
+      'README.md',
+      'assets/README.md',
+      'components/Logo.vue',
+      'components/README.md',
+      'layouts/README.md',
+      'layouts/default.vue',
+      'middleware/README.md',
+      'nuxt.config.js',
+      'package.json',
+      'pages/README.md',
+      'pages/index.vue',
+      'plugins/README.md',
+      'static/README.md',
+      'static/favicon.ico',
+      'store/README.md',
+    ]
+
+> package.json
+
+    {
+      dependencies: {
+        '@nuxtjs/composition-api': '^0.24.2',
+        'core-js': '^3.13.0',
+        nuxt: '^2.15.6',
+      },
+      devDependencies: {},
+      private: true,
+      scripts: {
+        build: 'nuxt build',
+        dev: 'nuxt',
+        generate: 'nuxt generate',
+        start: 'nuxt start',
+      },
+    }
+
+> Generated nuxt.config.js
+
+    `export default {␊
+      // Global page headers: https://go.nuxtjs.dev/config-head␊
+      head: {␊
+        title: 'output',␊
+        htmlAttrs: {␊
+          lang: 'en'␊
+        },␊
+        meta: [␊
+          { charset: 'utf-8' },␊
+          { name: 'viewport', content: 'width=device-width, initial-scale=1' },␊
+          { hid: 'description', name: 'description', content: '' },␊
+          { name: 'format-detection', content: 'telephone=no' }␊
+        ],␊
+        link: [␊
+          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }␊
+        ]␊
+      },␊
+    ␊
+      // Global CSS: https://go.nuxtjs.dev/config-css␊
+      css: [␊
+      ],␊
+    ␊
+      // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins␊
+      plugins: [␊
+      ],␊
+    ␊
+      // Auto import components: https://go.nuxtjs.dev/config-components␊
+      components: true,␊
+    ␊
+      // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules␊
+      buildModules: [␊
+        // https://composition-api.nuxtjs.org/␊
+        '@nuxtjs/composition-api/module',␊
+      ],␊
+    ␊
+      // Modules: https://go.nuxtjs.dev/config-modules␊
+      modules: [␊
+      ],␊
+    ␊
+      // Build Configuration: https://go.nuxtjs.dev/config-build␊
+      build: {␊
+      }␊
+    }␊
+    `
+
 ## verify linter: ESLint, Prettier, Lint staged files, StyleLint, Commitlint
 
 > Generated files