Create base layer

This commit is contained in:
Dominik Milacher 2025-10-05 12:20:39 +02:00
parent 8ea2b7d1e2
commit 948d3c53c3
14 changed files with 187 additions and 0 deletions

View File

@ -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

24
packages/layers/base/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
node_modules
*.log
.nuxt
nuxt.d.ts
.output
.data
.env
package-lock.json
framework
dist
.DS_Store
# Yarn
.yarn/cache
.yarn/*state*
# Local History
.history
# VSCode
.vscode/
# JetBrains/WebStorm
.idea/

View File

@ -0,0 +1,2 @@
shamefully-hoist=true
strict-peer-dependencies=false

View File

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

View File

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

View File

@ -0,0 +1,12 @@
import { fileURLToPath } from 'node:url'
export default defineNuxtConfig({
extends: ['..'],
modules: ['@nuxt/eslint'],
eslint: {
config: {
// Use the generated ESLint config for lint root project as well
rootDir: fileURLToPath(new URL('..', import.meta.url))
}
}
})

View File

@ -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 layer
Your layer 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 layer during development.
Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
## Distributing your layer
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-layer
```
Then add the dependency to their `extends` in `nuxt.config`:
```ts
defineNuxtConfig({
extends: 'your-layer'
})
```
## 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.

View File

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

View File

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

View File

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

View File

@ -0,0 +1,3 @@
import withNuxt from './.playground/.nuxt/eslint.config.mjs'
export default withNuxt()

View File

@ -0,0 +1,4 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
})

View File

@ -0,0 +1,21 @@
{
"name": "@webapps/layers/base",
"type": "module",
"version": "0.0.1",
"main": "./nuxt.config.ts",
"scripts": {
"dev": "nuxi dev .playground",
"dev:prepare": "nuxt prepare .playground",
"build": "nuxt build .playground",
"generate": "nuxt generate .playground",
"preview": "nuxt preview .playground",
"lint": "eslint ."
},
"devDependencies": {
"@nuxt/eslint": "latest",
"eslint": "^9.36.0",
"nuxt": "^4.1.2",
"typescript": "^5.9.2",
"vue": "latest"
}
}

View File

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