Repository: nuxt/create-nuxt-app
Pull request #960 (2022-08-06 00:20:15)

feat(template): support pug template
<!--- Provide a general summary of your changes in the title above -->

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [x] New feature (a non-breaking change which adds functionality)

## Description
<!--- Describe your changes in detail -->
<!--- Why is this change required? What problem does it solve? -->
<!--- If it resolves an open issue, please link to the issue here. For example "Resolves: #137" -->

create-nuxt-app is essential for creating Nuxt Project and I love it.
That's why I use this over and over again.

I prefer Pug over HTML because it's easier to read.
Also, I feel that there are many such friends. (#378)

After creating-nuxt-app, every time pug is installed and the page file is changed to `<template lang="pug">`.

I wanted to solve this, so I tried to fix it this time!
thank you

## Checklist:
<!--- Put an `x` in all the boxes that apply. -->
<!--- If your change requires a documentation PR, please link it appropriately -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [x] My change requires a change to the documentation.
- [x] I have updated the documentation accordingly.
- [x] I have added tests to cover my changes (if not applicable, please state why)


yasudanaoya: Someone was thinking the same thing!

https://github.com/nuxt/create-nuxt-app/issues/378
yanskun: @Atinux (I didn't know who to mention)
I love Nuxt, and  love Pug just as much.

I feel this is not actively developed.
However, until Nuxt3 is officially released, it will be used.

How can I get you to review.
Atinux: Thank you for your help @yanskun 

I added Clark as review since he has been working a lot on this project.

Patch:
diff --git a/README.md b/README.md
index 5697096..49f0853 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,9 @@ yarn create nuxt-app <my-project>
     - [Vant](https://github.com/youzan/vant)
     - [View UI](https://www.iviewui.com/)
     - [Vuetify](https://github.com/vuetifyjs/vuetify)
+1. Template engine
+    - HTML
+    - Pug
 1. Nuxt.js modules:
     - [Axios - Promise based HTTP client](https://github.com/nuxt-community/axios-module)
     - [Progressive Web App (PWA)](https://github.com/nuxt-community/pwa-module)
diff --git a/packages/cna-template/template/frameworks/pug/package.json b/packages/cna-template/template/frameworks/pug/package.json
new file mode 100644
index 0000000..b2a1b20
--- /dev/null
+++ b/packages/cna-template/template/frameworks/pug/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "pug": "^3.0.2",
+    "pug-plain-loader": "^1.1.0"
+  }
+}
diff --git a/packages/cna-template/template/frameworks/pug/pages/index.vue b/packages/cna-template/template/frameworks/pug/pages/index.vue
new file mode 100644
index 0000000..456026f
--- /dev/null
+++ b/packages/cna-template/template/frameworks/pug/pages/index.vue
@@ -0,0 +1,10 @@
+<template lang="pug">
+  tutorial
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'IndexPage'
+})
diff --git a/packages/create-nuxt-app/lib/package.js b/packages/create-nuxt-app/lib/package.js
index 5060a91..7ab7381 100644
--- a/packages/create-nuxt-app/lib/package.js
+++ b/packages/create-nuxt-app/lib/package.js
@@ -22,9 +22,10 @@ module.exports = {
   },
   load (generator) {
     const nuxtPkg = this.loadPackage('nuxt', generator)
+    const templatePkg = this.loadPackage(generator.answers.template, generator)
     const uiPkg = this.loadPackage(generator.answers.ui, generator)
     const testPkg = this.loadPackage(generator.answers.test, generator)
-    const pkg = merge(nuxtPkg, uiPkg, testPkg)
+    const pkg = merge(nuxtPkg, templatePkg, uiPkg, testPkg)
     pkg.dependencies = sortByKey(pkg.dependencies)
     pkg.devDependencies = sortByKey(pkg.devDependencies)
     return pkg
diff --git a/packages/create-nuxt-app/lib/prompts.js b/packages/create-nuxt-app/lib/prompts.js
index 91da3b1..748377a 100644
--- a/packages/create-nuxt-app/lib/prompts.js
+++ b/packages/create-nuxt-app/lib/prompts.js
@@ -48,6 +48,16 @@ module.exports = [
     ],
     default: 'none'
   },
+  {
+    name: 'template',
+    message: 'Template engine:',
+    type: 'list',
+    choices: [
+      { name: 'HTML', value: 'html' },
+      { name: 'Pug', value: 'pug' }
+    ],
+    default: 'html'
+  },
   {
     name: 'features',
     message: 'Nuxt.js modules:',
diff --git a/packages/create-nuxt-app/lib/saofile.js b/packages/create-nuxt-app/lib/saofile.js
index 62945b5..c6e4a73 100644
--- a/packages/create-nuxt-app/lib/saofile.js
+++ b/packages/create-nuxt-app/lib/saofile.js
@@ -74,6 +74,14 @@ module.exports = {
       }
     }]
 
+    if (this.answers.template !== 'html') {
+      actions.push({
+        type: 'add',
+        files: '**',
+        templateDir: join(frameworksDir, this.answers.template)
+      })
+    }
+
     if (this.answers.ui !== 'none') {
       actions.push({
         type: 'add',


Test patch:
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 1ea9d10..7de886e 100644
--- a/packages/create-nuxt-app/test/snapshots/index.test.js.md
+++ b/packages/create-nuxt-app/test/snapshots/index.test.js.md
@@ -1746,6 +1746,172 @@ Generated by [AVA](https://avajs.dev).
     }␊
     `
 
+## verify template: HTML
+
+> Generated files
+
+    [
+      '.editorconfig',
+      '.gitignore',
+      'README.md',
+      'components/NuxtLogo.vue',
+      'components/Tutorial.vue',
+      'nuxt.config.js',
+      'package.json',
+      'pages/index.vue',
+      'static/favicon.ico',
+      'store/README.md',
+    ]
+
+> package.json
+
+    {
+      dependencies: {
+        'core-js': '^3.25.0',
+        nuxt: '^2.15.8',
+        vue: '^2.7.10',
+        'vue-server-renderer': '^2.7.10',
+        'vue-template-compiler': '^2.7.10',
+      },
+      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: [␊
+      ],␊
+    ␊
+      // Modules: https://go.nuxtjs.dev/config-modules␊
+      modules: [␊
+      ],␊
+    ␊
+      // Build Configuration: https://go.nuxtjs.dev/config-build␊
+      build: {␊
+      }␊
+    }␊
+    `
+
+## verify template: Pug
+
+> Generated files
+
+    [
+      '.editorconfig',
+      '.gitignore',
+      'README.md',
+      'components/NuxtLogo.vue',
+      'components/Tutorial.vue',
+      'nuxt.config.js',
+      'package.json',
+      'pages/index.vue',
+      'static/favicon.ico',
+      'store/README.md',
+    ]
+
+> package.json
+
+    {
+      dependencies: {
+        'core-js': '^3.25.0',
+        nuxt: '^2.15.8',
+        pug: '^3.0.2',
+        'pug-plain-loader': '^1.1.0',
+        vue: '^2.7.10',
+        'vue-server-renderer': '^2.7.10',
+        'vue-template-compiler': '^2.7.10',
+      },
+      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: [␊
+      ],␊
+    ␊
+      // Modules: https://go.nuxtjs.dev/config-modules␊
+      modules: [␊
+      ],␊
+    ␊
+      // Build Configuration: https://go.nuxtjs.dev/config-build␊
+      build: {␊
+      }␊
+    }␊
+    `
+
 ## verify features: Axios - Promise based HTTP client, Progressive Web App (PWA), Content - Git-based headless CMS
 
 > Generated files