diff --git a/README.md b/README.md index 9fc083490..da0b0ed8a 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,7 @@ yarn create nuxt-app - [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) diff --git a/packages/cna-template/template/nuxt/nuxt.config.js b/packages/cna-template/template/nuxt/nuxt.config.js index 4a3a7d47f..6967bcdec 100644 --- a/packages/cna-template/template/nuxt/nuxt.config.js +++ b/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 diff --git a/packages/cna-template/template/nuxt/package.js b/packages/cna-template/template/nuxt/package.js index c80706ebe..50ca05fe3 100644 --- a/packages/cna-template/template/nuxt/package.js +++ b/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') diff --git a/packages/cna-template/template/nuxt/package.json b/packages/cna-template/template/nuxt/package.json index 05dacb2f0..9b7e7de8f 100644 --- a/packages/cna-template/template/nuxt/package.json +++ b/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", diff --git a/packages/cna-template/template/nuxt/pages/index.vue b/packages/cna-template/template/nuxt/pages/index.vue index 02630c934..8933d432a 100644 --- a/packages/cna-template/template/nuxt/pages/index.vue +++ b/packages/cna-template/template/nuxt/pages/index.vue @@ -29,6 +29,15 @@ <%_ if (typescript) { _%> +<%_ } else if (typescript) { _%> import Vue from 'vue' export default Vue.extend({}) diff --git a/packages/create-nuxt-app/lib/prompts.js b/packages/create-nuxt-app/lib/prompts.js index 338d37691..b7cfcb6c5 100644 --- a/packages/create-nuxt-app/lib/prompts.js +++ b/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: [] }, diff --git a/packages/create-nuxt-app/lib/saofile.js b/packages/create-nuxt-app/lib/saofile.js index e0e9fd188..b2a2b6d91 100644 --- a/packages/create-nuxt-app/lib/saofile.js +++ b/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 } }, diff --git a/packages/create-nuxt-app/test/snapshots/index.test.js.md b/packages/create-nuxt-app/test/snapshots/index.test.js.md index 55cc512d8..185d5f35a 100644 --- a/packages/create-nuxt-app/test/snapshots/index.test.js.md +++ b/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 diff --git a/packages/create-nuxt-app/test/snapshots/index.test.js.snap b/packages/create-nuxt-app/test/snapshots/index.test.js.snap index 22e6877d9..9e87ffa5c 100644 Binary files a/packages/create-nuxt-app/test/snapshots/index.test.js.snap and b/packages/create-nuxt-app/test/snapshots/index.test.js.snap differ