srcdev-nuxt-forms 0.0.1

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["@nuxt/eslint-config"],
+};

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

package/.playground/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'My amazing Nuxt layer (overwritten)'
+  }
+})

package/.playground/nuxt.config.ts

@@ -0,0 +1,3 @@
+export default defineNuxtConfig({
+  extends: ['..']
+})

package/README.md

@@ -0,0 +1,73 @@
+# Nuxt Layer Starter
+
+Create Nuxt extendable layer with this GitHub template.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Working on your theme
+
+Your theme is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+
+The `.playground` directory should help you on trying your theme during development.
+
+Running `pnpm dev` will prepare and boot `.playground` directory, which imports your theme itself.
+
+## Distributing your theme
+
+Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
+
+To do so, you only have to check if `files` in `package.json` are valid, then run:
+
+```bash
+npm publish --access public
+```
+
+Once done, your users will only have to run:
+
+```bash
+npm install --save your-theme
+```
+
+Then add the dependency to their `extends` in `nuxt.config`:
+
+```ts
+defineNuxtConfig({
+  extends: 'your-theme'
+})
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Or statically generate it with:
+
+```bash
+pnpm generate
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app.config.ts

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'Hello from Nuxt layer'
+  }
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    myLayer?: {
+      /** Project name */
+      name?: string
+    }
+  }
+}

package/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <HelloWorld />
+</template>

package/components/HelloWorld.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>Hello World!</h1>
+    <pre>{{ myLayer }}</pre>
+    <div>
+      <InputText />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const { myLayer } = useAppConfig()
+</script>
+

package/components/forms/input-text/InputText.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <input type="text" class="input-text" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+    console.log('InputText Loaded');
+</script>
+
+<style lang="css" scoped>
+    .input-text {
+        border: 1px solid #ccc;
+        padding: 10px;
+    }
+</style>

package/nuxt.config.ts

@@ -0,0 +1,10 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  components: [
+    {
+      path: "~/components",
+      pathPrefix: false
+    }
+  ],
+})

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "srcdev-nuxt-forms",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint .",
+    "postinstall": "nuxt prepare .playground"
+  },
+  "devDependencies": {
+    "@nuxt/eslint-config": "^0.3.13",
+    "eslint": "^9.5.0",
+    "nuxt": "^3.12.2",
+    "typescript": "^5.5.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.playground/.nuxt/tsconfig.json"
+}