feat: prepare for Nuxt 2.13 (#529)

* feat: prepare for Nuxt 2.13

* fix(jest): downgrate vue-jest to v3
pending by vuejs/vue-jest#241

* chore(deps): update all non-major dependencies (#509)

* fix(prettier): add stylelint-config-prettier

* chore(deps): update jest packages (major) (#513)

* chore: add npm registry config

* chore(deps): update all non-major dependencies

* chore(deps): update devdependency @nuxt/typescript-build to v1

* fix(ava): expect vm truthy as vue instance assertion

* chore(deps): update all non-major dependencies

* chore(deps): update all non-major dependencies

* feat(template): remove dotenv module (#544)

* chore: optimize svg & animation (#547)

* feat: add content module (#540)

* chore(deps): update all non-major dependencies

* chore(deps): lock file maintenance (#541)

* v3.0.0

* chore: update snapshots

* chore: update prompts and add TS runtime by default

* chore: fix lint issue

Co-authored-by: Clark Du <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Martijn Cuppens <[email protected]>
Co-authored-by: Benjamin Canac <[email protected]>
Co-authored-by: Pooya Parsa <[email protected]>

Author: 6 people

README.md

@@ -33,13 +33,13 @@ yarn create nuxt-app <my-project>
 
 ## Features :tada:
 
-1. Choose the package manager
+1. Package manager
     - Yarn
     - Npm
-1. Choose programming language
+1. Programming language
     - JavaScript
     - TypeScript
-1. Choose your favorite UI framework:
+1. UI framework:
     - None (feel free to add one later)
     - [Ant Design Vue](https://github.com/vueComponent/ant-design-vue)
     - [Bootstrap](https://github.com/bootstrap-vue/bootstrap-vue)
@@ -52,32 +52,27 @@ yarn create nuxt-app <my-project>
     - [Tailwind CSS](https://github.com/tailwindcss/tailwindcss)
     - [Vuesax](https://github.com/lusaxweb/vuesax)
     - [Vuetify](https://github.com/vuetifyjs/vuetify)
-1. Choose the runtime for TypeScript (if you choose TypeScript)
-    - Default
-    - [@nuxt/typescript-runtime](https://github.com/nuxt/typescript)
-1. Choose Nuxt.js modules:
+1. Nuxt.js modules:
     - [Axios](https://github.com/nuxt-community/axios-module)
-    - [Progressive Web App (PWA) Support](https://github.com/nuxt-community/pwa-module)
-1. Choose linting tools:
+    - [Progressive Web App (PWA)](https://github.com/nuxt-community/pwa-module)
+    - [Content](https://github.com/nuxt/content)
+1. Linting tools:
     - [ESLint](https://github.com/nuxt/eslint-config)
     - [Prettier](https://github.com/prettier/prettier)
     - [Lint staged files](https://github.com/okonet/lint-staged)
     - [StyleLint](https://github.com/stylelint/stylelint)
-1. Check the features needed for your project:
-    - [PWA](https://pwa.nuxtjs.org/)
-    - Linter / Formatter
-    - [Prettier](https://prettier.io/)
-    - [Axios](https://github.com/nuxt-community/axios-module)
-    - [Tachyons](https://tachyons.io)
-1. Choose your favorite test framework:
+1. Testing framework:
     - None
     - [Jest](https://github.com/facebook/jest)
     - [AVA](https://github.com/avajs/ava)
     - [WebdriverIO](https://webdriver.io)
-1. Choose rendering mode
+1. Rendering mode
     - [Universal (SSR / Static)](https://nuxtjs.org/guide/#server-rendered-universal-ssr-)
     - [SPA](https://nuxtjs.org/guide/#single-page-applications-spa-)
-1. Choose development tools
+1. Deployment target
+    - [Server (Node.js hosting)](https://nuxtjs.org/api/configuration-target)
+    - [Static (Static/JAMStack hosting)](https://nuxtjs.org/api/configuration-target)
+1. Development tools
     - [jsconfig.json](https://code.visualstudio.com/docs/languages/jsconfig)
     - [Semantic PR](https://probot.github.io/apps/semantic-pull-requests/)
 

packages/cna-template/template/nuxt/components/Logo.vue

@@ -14,6 +14,7 @@
     />
   </svg>
 </template>
+
 <style>
 .NuxtLogo {
   animation: 1s appear;

packages/cna-template/template/nuxt/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nuxt />
+    <Nuxt />
   </div>
 </template>
 

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

@@ -8,6 +8,11 @@ export default {
   */
   mode: '<%= mode %>',
   /*
+  ** Nuxt target
+  ** See https://nuxtjs.org/api/configuration-target
+  */
+  target: '<%= target %>',
+  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
@@ -68,6 +73,11 @@ export default {
     <%_ } _%>
   ],
   /*
+  ** Auto import components
+  ** See https://nuxtjs.org/api/configuration-components
+  */
+  components: true,
+  /*
   ** Nuxt.js dev-modules
   */
   buildModules: [

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

@@ -9,7 +9,7 @@ module.exports = {
     }
 
     const { scripts } = pkg
-    const { features, language = [], linter = [], runtime = [] } = generator.answers
+    const { features, language = [], linter = [] } = generator.answers
 
     // Linter
     const eslint = linter.includes('eslint')
@@ -70,20 +70,18 @@ module.exports = {
 
     // TS
     const typescript = language.includes('ts')
-    const tsRuntime = runtime.includes('ts-runtime')
 
     if (!typescript) {
       delete pkg.devDependencies['@nuxt/typescript-build']
+      delete pkg.dependencies['@nuxt/typescript-runtime']
     }
     if (!typescript || !eslint) {
       delete pkg.devDependencies['@nuxtjs/eslint-config-typescript']
     }
-    if (tsRuntime) {
+    if (typescript) {
       for (const key of Object.keys(scripts)) {
         scripts[key] = scripts[key].replace(/^nuxt /, 'nuxt-ts ')
       }
-    } else {
-      delete pkg.dependencies['@nuxt/typescript-runtime']
     }
     return pkg
   }

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

@@ -3,7 +3,8 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "generate": "nuxt generate",
+    "export": "nuxt export",
+    "serve": "nuxt serve",
     "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore"
   },

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

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div>
-      <logo />
+      <Logo />
       <h1 class="title">
         <%= name %>
       </h1>
@@ -30,23 +30,12 @@
 <%_ if (typescript) { _%>
 <script lang="ts">
 import Vue from 'vue'
-import Logo from '~/components/Logo.vue'
 
-export default Vue.extend({
-  components: {
-    Logo
-  }
-})
+export default Vue.extend({})
 </script>
 <%_ } else { _%>
 <script>
-import Logo from '~/components/Logo.vue'
-
-export default {
-  components: {
-    Logo
-  }
-}
+export default {}
 </script>
 <%_ } _%>
 

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

@@ -1,12 +1,12 @@
 module.exports = [
   {
     name: 'name',
-    message: 'Project name',
+    message: 'Project name:',
     default: '{outFolder}'
   },
   {
     name: 'language',
-    message: 'Choose programming language',
+    message: 'Programming language:',
     choices: [
       { name: 'JavaScript', value: 'js' },
       { name: 'TypeScript', value: 'ts' }
@@ -16,7 +16,7 @@ module.exports = [
   },
   {
     name: 'pm',
-    message: 'Choose the package manager',
+    message: 'Package manager:',
     choices: [
       { name: 'Yarn', value: 'yarn' },
       { name: 'Npm', value: 'npm' }
@@ -26,7 +26,7 @@ module.exports = [
   },
   {
     name: 'ui',
-    message: 'Choose UI framework',
+    message: 'UI framework:',
     type: 'list',
     pageSize: 15,
     choices: [
@@ -45,31 +45,21 @@ module.exports = [
     ],
     default: 'none'
   },
-  {
-    name: 'runtime',
-    message: 'Choose the runtime for TypeScript',
-    type: 'list',
-    choices: [
-      { name: 'Default', value: 'none' },
-      { name: '@nuxt/typescript-runtime', value: 'ts-runtime' }
-    ],
-    when: answers => answers.language === 'ts'
-  },
   {
     name: 'features',
-    message: 'Choose Nuxt.js modules',
+    message: 'Nuxt.js modules:',
     type: 'checkbox',
     pageSize: 10,
     choices: [
       { name: 'Axios', value: 'axios' },
-      { name: 'Progressive Web App (PWA) Support', value: 'pwa' },
+      { name: 'Progressive Web App (PWA)', value: 'pwa' },
       { name: 'Content', value: 'content' }
     ],
     default: []
   },
   {
     name: 'linter',
-    message: 'Choose linting tools',
+    message: 'Linting tools:',
     type: 'checkbox',
     pageSize: 10,
     choices: [
@@ -82,7 +72,7 @@ module.exports = [
   },
   {
     name: 'test',
-    message: 'Choose test framework',
+    message: 'Testing framework:',
     type: 'list',
     choices: [
       { name: 'None', value: 'none' },
@@ -94,17 +84,27 @@ module.exports = [
   },
   {
     name: 'mode',
-    message: 'Choose rendering mode',
+    message: 'Rendering mode:',
     type: 'list',
     choices: [
-      { name: 'Universal (SSR / Static)', value: 'universal' },
+      { name: 'Universal (SSR / SSG)', value: 'universal' },
       { name: 'Single Page App', value: 'spa' }
     ],
     default: 'universal'
   },
+  {
+    name: 'target',
+    message: 'Deployment target:',
+    type: 'list',
+    choices: [
+      { name: 'Server (Node.js hosting)', value: 'server' },
+      { name: 'Static (Static/JAMStack hosting)', value: 'static' }
+    ],
+    default: 'server'
+  },
   {
     name: 'devTools',
-    message: 'Choose development tools',
+    message: 'Development tools:',
     type: 'checkbox',
     choices: [
       { name: 'jsconfig.json (Recommended for VS Code)', value: 'jsconfig.json' },

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

@@ -11,7 +11,6 @@ module.exports = {
   prompts: require('./prompts'),
   templateData () {
     const typescript = this.answers.language.includes('ts')
-    const tsRuntime = this.answers.runtime && this.answers.runtime.includes('ts-runtime')
     const pwa = this.answers.features.includes('pwa')
     const eslint = this.answers.linter.includes('eslint')
     const prettier = this.answers.linter.includes('prettier')
@@ -27,7 +26,6 @@ module.exports = {
 
     return {
       typescript,
-      tsRuntime,
       pwa,
       eslint,
       prettier,