@thespielplatz/nuxt-dev-base v1.2.3
Nuxt Dev Base
Development starter for doing amazing things.
Quick Setup
- Install the module to your Nuxt application with one command:
npm i @thespielplatz/nuxt-dev-base
- Edit Add it to the
modules
section in yournuxt.config.ts
:
export default defineNuxtConfig({
modules: [
'@thespielplatz/nuxt-dev-base',
],
})
Follow the install guide on nuxtui: https://ui3.nuxt.dev/getting-started
Add the custom color
footer
to nuxtui in yournuxt.config.ts
:
export default defineNuxtConfig({
ui: {
theme: {
colors: ['primary', 'secondary', 'info', 'success', 'warning', 'error', 'footer'],
},
},
})
That's it! You can now use Nuxt Dev Base in your Nuxt app ✨
Features
Localstorage PLugin
const localStorageText = ref('')
const { $localStorage } = useNuxtApp()
onMounted(() => {
localStorageText.value = $localStorage.getItem(LOCALSTORAGE_KEY) || ''
})
watch(localStorageText, (value) => {
$localStorage.setItem(LOCALSTORAGE_KEY, value)
})
Local Storage created with prefix
const FOOBAR_KEY_1 = 'fooBar1'
const FOOBAR_KEY_2 = 'fooBar2'
const fooBar1 = ref('')
const fooBar2 = ref('')
const { $localStorage } = useNuxtApp()
const localStorageForFooBar = $localStorage.create('with-prefix')
onMounted(() => {
fooBar1.value = localStorageForFooBar.getItem(FOOBAR_KEY_1) || ''
fooBar2.value = localStorageForFooBar.getItem(FOOBAR_KEY_2) || ''
})
watch(fooBar1, (value) => {
localStorageForFooBar.setItem(FOOBAR_KEY_1, value)
})
watch(fooBar2, (value) => {
localStorageForFooBar.setItem(FOOBAR_KEY_2, value)
})
Simple Footer with Gitversion
You can use the <FooterMain />
component to have an automatical footer in your project. See the playground project too "how it looks like".
Example package.json
:
{
"homepage": "https://github.com/thespielplatz/nuxt-dev-base",
"version": "0.0.1",
"meta": {
"special-version": "0.0.1-for-testing"
}
}
- It reads the
version
field from thepackage.json
and displays a bage - It reads the
meta.special-version
field from thepackage.json
as an override for version badge - It reads the
homepage
field from thepackage.json
and uses it as Github Link Icon and Version Bagde Link (to the Github Release page)
Configuration of Docker Build
WORKDIR /app
COPY package.json /app
- Example Dockerfile: See
Configuration of Github Actions
name: Run pipeline if commit has contains 'RUN_PIPELINE'
on:
push:
branches:
- main
jobs:
docker:
if: |
contains(github.event.head_commit.message, 'RUN_PIPELINE')
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4.2.2
- name: Extract version from package.json & short commit hash & check for RUN_PIPELINE in commit message
id: extract_version
run: |
VERSION=$(jq -r '.version' package.json)
SHORT_HASH=$(git rev-parse --short HEAD)
if echo "${{ github.event.head_commit.message }}" | grep -q "RUN_PIPELINE"; then
echo "version=${VERSION}.${SHORT_HASH}" >> $GITHUB_OUTPUT
else
echo "version=${VERSION}" >> $GITHUB_OUTPUT
fi
- name: if RUN_PIPELINE, add special-version to package.json
run: |
if echo "${{ github.event.head_commit.message }}" | grep -q "RUN_PIPELINE"; then
jq '.meta["special-version"] = "${{ steps.extract_version.outputs.version }}"' package.json > package.tmp.json && mv package.tmp.json package.json
fi
Server Util: isDevelopmentMode()
const developmentMode = isDevelopmentMode()
consola.info(`Development mode: ${developmentMode ? 'enabled' : 'disabled'}`)
Legal Pages loaded from data
If you want some legal pages simply shown in your footer, you can create the following files and the content will magicly appear in a popup:
data/legal-notice.html
data/privacy-policy.html
FYI: You can easily mount the /data
directory outside of your docker container ;)
Full Changelog
Backlog
- empty
Development
npm run dev:prepare
npm run dev
Experiment with the module in the playground environment 🎉
(Inspired by the Nuxt module guide)
Dev Notes
CI & CD ideas can be found here.
Support
If you find this project helpful, please give it a star! ⭐
If you love it, consider forking it and taking it out for dinner. 🌟🍽️