feat(nuxi): support mode flags for add command

docs/content/3.docs/1.usage/8.cli.md

@@ -115,6 +115,8 @@ Option        | Default          | Description
 `NAME` | - | Specify a name of the file that will be created.
 `--cwd` | `.` | The directory of the target application.
 `--force` | `false` | Force override file if already exsits.
+`--client` | - | When applicable, this flag indicates that the entity is client only.
+`--server` | - | When applicable, this flag indicates that the entity is server only.
 
 **Example:**
 
@@ -127,7 +129,7 @@ The `add` command generates new elements:
 * **component**: `npx nuxi add component TheHeader`
 * **composable**: `npx nuxi add composable foo`
 * **layout**: `npx nuxi add layout custom`
-* **plugin**: `npx nuxi add plugin analytics`
+* **plugin**: `npx nuxi add plugin firebase --client` (generates `/plugins/firebase.client.ts`)
 * **page**: `npx nuxi add page about` or `npx nuxi add page "category/[id]"`
 * **middleware**: `npx nuxi add middleware auth`
 * **api**: `npx nuxi add api hello` (CLI will generate file under `/server/api`)

packages/nuxi/src/commands/add.ts

@@ -15,7 +15,8 @@ export default defineNuxtCommand({
     const cwd = resolve(args.cwd || '.')
 
     const template = args._[0]
-    const name = args._[1]
+    let name = args._[1]
+    let mode = (args.client && 'client') || (args.server && 'server')
 
     // Validate template name
     if (!templates[template]) {
@@ -33,8 +34,21 @@ export default defineNuxtCommand({
     const kit = await loadKit(cwd)
     const config = await kit.loadNuxtConfig({ cwd })
 
+    const extRegex = /\.[a-z]+$/
+    const extProvided = name.match(extRegex)?.[0]
+    const modeProvided = name.match(/\.(client|server)/)?.[0]
+
+    if (extProvided && extProvided !== modeProvided) {
+      name = name.replace(extRegex, '')
+    }
+
+    if (modeProvided) {
+      name = name.replace(modeProvided, '')
+      if (!mode) { mode = modeProvided.replace(/\./, '') }
+    }
+
     // Resolve template
-    const res = templates[template]({ name })
+    const res = templates[template]({ name, mode })
 
     // Resolve full path to generated file
     const path = resolve(config.srcDir, res.path)

packages/nuxi/src/utils/templates.ts

@@ -1,7 +1,7 @@
 import { upperFirst } from 'scule'
 
 interface Template {
-  (options: { name: string }): { path: string, contents: string }
+  (options: { name: string, mode?: string }): { path: string, contents: string }
 }
 
 const api: Template = ({ name }) => ({
@@ -15,27 +15,34 @@ export default defineHandle((req, res) => {
 `
 })
 
-const plugin: Template = ({ name }) => ({
-  path: `plugins/${name}.ts`,
-  contents: `
+const plugin: Template = (opts) => {
+  opts.name = opts.mode ? `${opts.name}.${opts.mode}` : opts.name
+  return {
+    path: `plugins/${opts.name}.ts`,
+    contents: `
 export default defineNuxtPlugin((nuxtApp) => {})
   `
-})
+  }
+}
 
-const component: Template = ({ name }) => ({
-  path: `components/${name}.vue`,
-  contents: `
+const component: Template = (opts) => {
+  // Enable when https://github.com/nuxt/framework/pull/1919 is merged
+  // opts.name = opts.mode ? `${opts.name}.${opts.mode}` : opts.name
+  return {
+    path: `components/${opts.name}.vue`,
+    contents: `
 <script lang="ts" setup></script>
 
 <template>
   <div>
-    Component: ${name}
+    Component: ${opts.name}
   </div>
 </template>
 
 <style scoped></style>
 `
-})
+  }
+}
 
 const composable: Template = ({ name }) => {
   const nameWithUsePrefix = name.startsWith('use') ? name : `use${upperFirst(name)}`