nuxt-ignis 0.1.0

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/dependabot.yml

@@ -0,0 +1,16 @@
+# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+# https://github.blog/2023-08-24-a-faster-way-to-manage-version-updates-with-dependabot/
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+      time: "05:10"
+    commit-message:
+      prefix: "npm"
+    groups:
+      all:
+        patterns:
+          - "*"

package/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    // enable auto-linting
+    "editor.codeActionsOnSave": {
+        "source.fixAll": "explicit",
+        "source.fixAll.eslint": "explicit"
+    },
+    // ESlint flat config
+    "eslint.useFlatConfig": true
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Alois Sečkár
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# Nuxt Ignis
+
+![Nuxt Ignis](https://github.com/AloisSeckar/nuxt-ignis/blob/main/public/nuxt-ignis.png)
+
+This is a template starter for Nuxt web applicatons. It is being build as the setup I'd currently use to start with a new "real world" [Nuxt](https://nuxt.com/) webapp. It will improve and grow together with my skills. I also try to include **WHAT** and **WHY** comments based on my knowledge about the framework and used libraries.
+
+## How to use
+
+### As standalone template
+1. Do a `git checkout` from https://github.com/AloisSeckar/nuxt-ignis.git
+2. Open in IDE and run `pnpm install` in terminal
+3. Configure modules via `.env` properties
+4. Start dev server with `pnpm dev` command
+5. Visit `localhost:3000` in browser
+
+You are ready to build your next awesome project in Nuxt.
+
+### As a layer
+Aside from being "forked", `nuxt-ignis` is also available as a NPM package that can be referenced as a single-import dependency with all the features incomming.
+
+More info comming soon...
+
+## Overview
+
+**Fundamentals**
+- [`pnpm`](https://pnpm.io/) based project
+- [Nuxt](https://nuxt.com/) application framework built atop [Vue.js](https://vuejs.org/)
+- Available as a template or standalone package
+
+**Built-in features**
+- linting for maintaining coding standards and improving code quality via [`@nuxt/eslint`](https://nuxt.com/modules/eslint) 
+- zero-config OWASP security patterns for Nuxt via [`nuxt-security`](https://nuxt-security.vercel.app/)
+- de-facto standard state management library for Vue apps via [`@pinia/nuxt`](https://pinia.vuejs.org/ssr/nuxt.html)
+- integration with utility functions library for Vue apps via [`@vueuse/nuxt`](https://vueuse.org/nuxt/README.html)
+- handful tools for working with images via [`@nuxt/image`](https://image.nuxt.com/) 
+- SSR-friendly component for rendering dynamic date/time via [`nuxt-time`](https://nuxt.com/modules/time)
+
+**Configurable features**
+- UI (pick 0-1)
+  - **Nuxt UI** - UI component and CSS library via [`@nuxt/ui`](https://ui.nuxt.com/) 
+  - **Tailwind CSS** - CSS library (included in Nuxt UI) via [`@nuxtjs/tailwindcss`](https://tailwindcss.nuxtjs.org/) 
+- Database (pick 0-1)
+  - **Neon** - serverless PostgreSQL database via [`nuxt-neon`](https://github.com/AloisSeckar/nuxt-neon/) 
+  - **Supabase** - serverless PostgreSQL database via [`@nuxtjs/supabase`](https://supabase.nuxtjs.org/) 
+- Other (opt-in)
+  - **I18N** - translations and internalization made easy via [`@nuxtjs/i18n`](hhttps://i18n.nuxtjs.org/) 
+  - **FormKit** - for handling input forms via [`@formkit/nuxt`](https://nuxt.com/modules/formkit) 
+  - **Content** - for working with website content in `.md` or `.json` via [`@nuxt/content`](https://content.nuxt.com/) 
+  - **Open Props** - extra CSS styles via [Open Props](https://open-props.style/)
+
+## Configuration
+It is possible to select which Nuxt modules will be activated in your project. All dependencies are being downloaded into local `node_modules`, but Nuxt build process will ensure only relevant packages will be bundled for production.
+
+### UI preset
+It is possible to pick from three options:
+- `nuxt-ui` - full https://ui.nuxt.com/ via `@nuxt/ui` connector module **[RECOMMENDED]**
+- `tailwind` - only https://tailwindcss.com/ via `@nuxtjs/tailwindcss` connector module
+- `off` - no UI library preset **[DEFAULT]**
+
+Set the value via `NUXT_PUBLIC_IGNIS_PRESET_UI` env variable.
+
+Value other than `off` will override Optional modules setting.
+
+### Database preset
+It is possible to pick from three options:
+- `neon` - https://neon.tech/ via `nuxt-neon` connector module **[RECOMMENDED]**
+- `supabase` - https://supabase.com/ via `@nuxtjs/supabase` connector module
+- `off` - no database module preset **[DEFAULT]**
+
+Set the value via `NUXT_PUBLIC_IGNIS_DB_PRESET` env variable.
+
+Value other than `off` will override Optional modules setting.
+
+### Optional modules
+Currently, following modules are opinionated:
+- `@nuxt/ui` - set `NUXT_PUBLIC_IGNIS_UI` to `true | false`
+- `@nuxtjs/tailwindcss` - set `NUXT_PUBLIC_IGNIS_TAILWIND` to `true | false` (ignored if `NUXT_PUBLIC_IGNIS_UI=true`)
+- `nuxt-neon` - set `NUXT_PUBLIC_IGNIS_NEON` to `true | false`
+- `@nuxtjs/supabase` - set `NUXT_PUBLIC_IGNIS_SUPABASE` to `true | false`
+- `@nuxtjs/i18n` - set `NUXT_PUBLIC_IGNIS_I18N` to `true | false`
+- `@formkit/nuxt` - set `NUXT_PUBLIC_IGNIS_FORMKIT` to `true | false`
+- `@nuxt/content` - set `NUXT_PUBLIC_IGNIS_CONTENT` to `true | false`
+
+Default values are **false** (not included) for all optional modules.
+
+### Optional features
+Currently, following extra features (not using separate Nuxt Modules) are opinionated:
+- `Open Props CSS` - set `NUXT_PUBLIC_IGNIS_OPENPROPS` to `true | false`
+
+Default values are **false** (not included) for all optional features.

package/app.config.ts

@@ -0,0 +1,3 @@
+export default defineAppConfig({
+  textTitle: 'Nuxt Ignis',
+})

package/app.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="p-3">
+    <div class="ignis-header">
+      <img src="/nuxt-ignis.png" class="ignis-logo" :title :alt>
+      <h1 class="my-4 text-4xl text-amber-400 font-bold">
+        {{ useT("title") }}
+      </h1>
+      <img src="/nuxt-ignis.png" class="ignis-logo" :title :alt>
+    </div>
+    <div>{{ useT("subtitle") }}</div>
+    <NuxtPage />
+    <CurrentTime />
+    <div class="link text-xs">
+      <NuxtLink to="https://github.com/AloisSeckar/nuxt-ignis">
+        https://github.com/AloisSeckar/nuxt-ignis
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({
+  title: useAppConfig().textTitle,
+  htmlAttrs: {
+    lang: 'en',
+  },
+  bodyAttrs: {
+    class: 'bg-slate-900 m-auto text-center text-white'
+  }
+})
+initConsola()
+log.info('Nuxt Ignis was here!')
+const title = useT('title')
+const alt = title
+</script>
+
+<style scoped>
+.ignis-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+.ignis-logo {
+  display: inline;
+  width: 64px;
+  height: 64px;
+}
+.ignis-title {
+  margin-top: 15px;
+}
+</style>

package/assets/css/open-props.css

@@ -0,0 +1,20 @@
+/*
+  This will import Open Props CSS styles
+  https://open-props.style/
+
+  NUXT_PUBLIC_IGNIS_OPENPROPS=true is required to use this feature
+*/
+
+@import "open-props/normalize";
+@import "open-props/buttons";
+
+/* demo class - used in AppFeature component instance */
+.openprops-feature {
+
+  /* https://open-props.style/#gradients */
+  background: var(--gradient-18);
+
+  /* https://open-props.style/#colors */
+  color: var(--gray-12);
+  
+}

package/assets/css/tailwind.css

@@ -0,0 +1,49 @@
+/* 
+  This file is auto-imported when using Tailwind CSS
+
+  Use @apply if you don't want to define style for each element separately
+
+  Read more at:
+  https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
+  https://tailwindcss.com/docs/functions-and-directives#apply
+
+  Use correct @layer to keep your Tailwind CSS organized:
+  https://bloggie.io/@kinopyo/organize-your-css-in-the-tailwind-style-with-layer-directive
+
+  And most importantly: THINK TWICE before using this approach!
+*/
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+
+    /* 
+      Tailwind CSS classes might be auto-applied to all respective elements like this.
+      However, I recommend NOT to use it like that, because this obsfucates code logic
+      and makes maintaing harder (even you should soon forgot styles are defined here)
+    */
+
+    /* NOTE: For setting "body" tag attributes, it is better to use useHead() composable - @see `app.vue`*/
+    /*
+    body {
+        @apply bg-slate-900;
+    }
+    */
+
+}
+
+@layer components {
+
+    /* 
+      Following classes are available to use throughout the app as shorthands.
+      Although still discouraged by Tailwind CSS authors, this usage makes more
+      sense, because the class name is visible and trackable in SFC templates.
+    */
+
+    .link {
+        @apply my-2 text-amber-400 hover:text-amber-200;
+    }
+
+}

package/assets/lang/en.json

@@ -0,0 +1,25 @@
+{
+    "title" : "Nuxt Ignis",
+    "subtitle" : "A ready-to-use setup for your next application in Nuxt",
+    "page2" : "This is a second page of the application",
+    "image" : "Image by Unsplash displayed with Nuxt Image",
+    "goto1" : "Go back to index",
+    "goto2" : "Go to 2nd page",
+    "features" : {
+        "nuxt" : "Nuxt application framework atop Vue.js",
+        "security" : "Nuxt Security module helping with OWASP patterns",
+        "image" : "NuxtImage to optimize use of images",
+        "pinia" : "Pinia for state management",
+        "vueuse" : "VueUse utils available",
+        "i18n" : "I18n for translations",
+        "consola" : "Logging with unjs/consola",
+        "ui" : "Nuxt UI as UI components library",
+        "tailwind" : "Tailwind CSS for styling",
+        "icon" : "Icon module for displaying icons",
+        "supabase" : "Supabase for auth and DB services",
+        "neon" : "Neon for DB services",
+        "formkit" : "FormKit for input forms",
+        "content" : "Nuxt Content for creating and editing content",
+        "openprops" : "Additional CSS by Open Props"
+    }
+}

package/components/AppFeature.vue

@@ -0,0 +1,62 @@
+<!--
+    https://nuxt.com/docs/guide/directory-structure/components
+
+    Example of a reusable Nuxt component.
+
+    Any valid .vue file inside `/components` directory is auto-imported everywhere by Nuxt
+    => no need for explicit imports.
+
+    Modern Vue.js Composition API syntax is used for setup.
+    https://vuejs.org/api/sfc-script-setup.html
+
+    For usage go to `/pages/index.vue`
+
+    {{ text }}
+     - "double mustache" syntax is used to display JS expression inside HTML template
+     - notice you can call props directly in template section
+
+    Icon
+     - icons are provided by "nuxt-icon" module
+     - module is auto-imported via "@nuxt/ui"
+     - NUXT_PUBLIC_IGNIS_UI=nuxt-ui is required to use this feature
+-->
+
+<template>
+  <div class="m-1 px-2 py-1 border border-amber-300 font-bold text-lg text-feature hover:bg-slate-700">
+    {{ text }}
+    <div v-if="showIcon" style="display: inline;">
+      <Icon name="ic:sharp-add-reaction" style="color: yellow" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Macro `defineProps()` comes from Vue.js API
+ * (https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits).
+ * This is how to pass variables inside components in Vue.
+ * 
+ * `required` - value has to be provided, otherwise an error will occur
+ * 
+ * `default` - will have this value, unless overwritten by caller
+ */
+const props = defineProps({
+  text: { type: String, required: true },
+  optionalText: { type: String, default: 'default' },
+})
+
+/**
+ * `Icon` component can only be used if `@nuxt/ui` module is activated.
+ */
+const showIcon = useRuntimeConfig().public.ignis.ui === 'nuxt-ui'
+
+// In setup section, you have to adress properties like this.
+// You cannot reach them directly like in template.
+
+// Note special inline `eslint` flag because normally you shouldn't use build-in console directly
+// @see https://eslint.org/docs/latest/rules/no-console
+
+/* eslint "no-console" : "off" */
+log.debug(props.text)
+log.debug(props.optionalText)
+</script>

package/components/CurrentTime.vue

@@ -0,0 +1,30 @@
+<!--
+  The `NuxtTime` component of `nuxt-time` module is a way how to deal with SSR in Nuxt.
+  Because page on the server is rendered miliseconds before being re-rendered on client,
+  wild "hydration error mismatch" may appear from a difference between displayed times.
+
+  This special component gracefully deals with the issue:
+  https://github.com/nuxt/nuxt/discussions/23278#discussioncomment-7607298
+-->
+
+<template>
+  <div>
+    Current time by
+    <span class="link">
+      <NuxtLink to="https://github.com/danielroe/nuxt-time">Nuxt Time</NuxtLink>
+    </span>:
+    <NuxtTime
+      :datetime="currentDate"
+      year="numeric"
+      month="2-digit"
+      day="2-digit"
+      hour="2-digit"
+      minute="2-digit"
+      second="2-digit"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const currentDate = useNow()
+</script>

package/composables/useTranslation.ts

@@ -0,0 +1,48 @@
+import lang from '@/assets/lang/en.json'
+
+/**
+ * An adapter above `t` function from `i18n` module.
+ * 
+ * This function is basically a shorthand for obtaining `i18n` translation in scripts.
+ * In templates `$t` function is available, but in scripts we normally have to
+ * access the `t` function via the instance of `$i18n` living inside current Nuxt App.
+ * 
+ * Since $i18n is an optional dependency in Nuxt Ignis setup, this also gracefully handles 
+ * cases when user turns the module off while still using the translations in the code.
+ * 
+ * @param key identifier of text that should be displayed
+ * @returns translated text from i18n sources
+ */
+export function useT(key: string): string {
+  if (useRuntimeConfig().public.ignis.i18n) {
+    // i18n available => just use it
+    // @ts-ignore (in case i18n is turned off, type of $i18n cannot be infered)
+    return useNuxtApp().$i18n.t(key)
+  } else {
+    // backdoor for Nuxt Ignis to display values on demo index page
+    const backdoorValue = searchLang(key)
+    if (backdoorValue) {
+        return backdoorValue as string
+    }
+    // for other custom values a warning will be produced and a placeholder will be returned
+    log.warn('@nuxtjs/i18n turned off, translations are not available (set NUXT_PUBLIC_IGNIS_I18N=true)')
+    return "Translation not available"
+  }
+}
+
+/** AI-generated helper to search a value for given key in JSON lang file. */
+function searchLang(key: string): unknown {
+    const keys = key.split(".")
+
+    let current = lang
+    for (const key of keys) {
+        if (current && key in current) {
+            // @ts-expect-error TODO this should be fixed
+            current = current[key]
+        } else {
+            return undefined
+        }
+    }
+
+    return current
+}

package/eslint.config.mjs

@@ -0,0 +1,40 @@
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+// config is being passed as an array of separate objects
+// as suggested here: https://github.com/nuxt/eslint/discussions/413
+
+export default withNuxt([
+
+  // files to be processed (JS/TS + Vue components)
+  { files: ['**/*.js', '**/*.ts', '**/*.vue'] },
+
+  // `rules` section can follow, where you can change default eslint behaviour if needed
+  // you can adjust or even turn off some rules if you cannot or don't want to satisfy them
+  {
+    rules: {
+      // the default for this rule is "1", but I find it too restrictive
+      // https://eslint.vuejs.org/rules/max-attributes-per-line.html
+      'vue/max-attributes-per-line': ['error', {
+        singleline: {
+          max: 4,
+        },
+        multiline: {
+          max: 3,
+        },
+      }],
+      // the default rule forces newline after "else"
+      // I prefer using "} else {" on single row
+      'vue/html-closing-bracket-newline': [
+        'error',
+        {
+          multiline: 'never',
+          selfClosingTag: {
+            multiline: 'never',
+          },
+        },
+      ],
+      '@stylistic/brace-style': 'off',
+    },
+  },
+
+])

package/features.ts

@@ -0,0 +1,110 @@
+import { defu } from 'defu'
+import OpenProps from 'open-props'
+import { log } from './utils/consola'
+
+export function setFeatures() {
+  // list of optional extra features
+  const extras = [] as string[]
+
+  // object for optional config that will be merged with global Nuxt config
+  // declared in nuxt.config.ts
+  let nuxtConfig = {
+    modules: [] as string[],
+  }
+
+  // 1. default modules (mandatory)
+  nuxtConfig.modules.push(
+    'nuxt-time',
+    'nuxt-security',
+    '@nuxt/eslint',
+    '@nuxt/image',
+    '@pinia/nuxt',
+    '@vueuse/nuxt',
+  )
+
+  // 2. optional modules
+
+  // ui
+  const uiPreset = process.env.NUXT_PUBLIC_IGNIS_PRESET_UI
+  if (uiPreset === 'nuxt-ui' || (!uiPreset && process.env.NUXT_PUBLIC_IGNIS_UI === 'true')) {
+    nuxtConfig.modules.push('@nuxt/ui')
+  } else {
+    // remove @nuxt/ui-specific components from resolution if module is not used
+    nuxtConfig = defu({
+      vue: {
+        compilerOptions: {
+          isCustomElement: (tag: string) => tag === 'Icon',
+        },
+      },
+    }, nuxtConfig)
+
+    // evaluate separate Tailwind CSS module
+    if (uiPreset === 'tailwind' || (!uiPreset && process.env.NUXT_PUBLIC_IGNIS_TAILWIND === 'true')) {
+      nuxtConfig.modules.push('@nuxtjs/tailwindcss')
+    }
+  }
+
+  // database
+  const dbPreset = process.env.NUXT_PUBLIC_IGNIS_PRESET_DB
+  if (dbPreset === 'neon' || (!dbPreset && process.env.NUXT_PUBLIC_IGNIS_NEON === 'true')) {
+    // module definition
+    nuxtConfig.modules.push('nuxt-neon')
+  } else if (dbPreset === 'supabase' || (!dbPreset && process.env.NUXT_PUBLIC_IGNIS_SUPABASE === 'true')) {
+    // module definition
+    nuxtConfig.modules.push('@nuxtjs/supabase')
+    // module-specific config key
+    nuxtConfig = defu({
+      supabase: {
+        redirect: false, // https://github.com/supabase/supabase/issues/16551#issuecomment-1685300935
+      },
+    }, nuxtConfig)
+  }
+
+  // i18n
+  if (process.env.NUXT_PUBLIC_IGNIS_I18N === 'true') {
+    // module definition
+    nuxtConfig.modules.push('@nuxtjs/i18n')
+    // module-specific config key
+    nuxtConfig = defu({
+      i18n: {
+        vueI18n: './i18n.config.ts',
+        locales: ['en'],
+        defaultLocale: 'en',
+      },
+    }, nuxtConfig)
+  }
+
+  // formkit
+  if (process.env.NUXT_PUBLIC_IGNIS_FORMKIT === 'true') {
+    nuxtConfig.modules.push('@formkit/nuxt')
+  }
+
+  // content
+  if (process.env.NUXT_PUBLIC_IGNIS_CONTENT === 'true') {
+    nuxtConfig.modules.push('@nuxt/content')
+  }
+
+  // Open Props CSS
+  if (process.env.NUXT_PUBLIC_IGNIS_OPENPROPS === 'true') {
+    extras.push('Open Props CSS')
+    nuxtConfig = defu({
+      // import Open Prpops stylesheet
+      css: ['~/assets/css/open-props.css'],
+      // CSS processor for Open Props
+      postcss: {
+        plugins: {
+          'postcss-jit-props': OpenProps,
+        },
+      },
+    }, nuxtConfig)
+  }
+
+  let overview = 'Nuxt Ignis will start using following settings:\n'
+  overview += 'Modules: ' + nuxtConfig.modules.join(', ') + '\n'
+  if (extras.length > 0) {
+    overview += 'Extras: ' + extras.join(', ') + '\n'
+  }
+  log.info(overview)
+
+  return nuxtConfig
+}

package/formkit.config.ts

@@ -0,0 +1,11 @@
+// https://formkit.com/guides/optimizing-for-production#using-the-nuxt-module
+import { en, de } from '@formkit/i18n'
+import type { DefaultConfigOptions } from '@formkit/vue'
+
+const config: DefaultConfigOptions = {
+  // example of importing different message translations and set the default one
+  locales: { en, de },
+  locale: 'en',
+}
+
+export default config

package/i18n.config.ts

@@ -0,0 +1,12 @@
+import en from '@/assets/lang/en.json'
+// create and load more language files if needed
+
+export default defineI18nConfig(() => ({
+  legacy: false,
+  strategy: 'no_prefix',
+  locale: 'en',
+  defaultLocale: 'en',
+  fallbackLocale: 'en',
+  messages: { en }, // allowe more language if needed
+  warnHtmlMessage: false,
+}))

package/nuxt.config.ts

@@ -0,0 +1,53 @@
+import { defu } from 'defu'
+import { setFeatures } from './features'
+
+const ignisFeatures = setFeatures()
+
+// https://nuxt.com/docs/guide/directory-structure/nuxt-config
+const nuxtConfig = defu(ignisFeatures, {
+
+  // https://nuxt.com/docs/api/nuxt-config#compatibilitydate
+  compatibilityDate: '2024-12-01',
+
+  // simple eslint config - see eslint.config.mjs
+  eslint: {
+    config: {
+      stylistic: true,
+    },
+  },
+
+  // app configuration
+  runtimeConfig: {
+    // nitro-only secret env-like variables go here
+    public: {
+      // client-exposed env-like variables go here
+
+      // features
+      // NOTE: due to static-like nature of nuxt.config.ts file
+      // actual values MUST BE provided via .env file (or production equivalent)
+      ignis: {
+        preset: {
+          ui: 'off', // nuxt-ui/tailwind/off
+          db: 'off', // neon/supabase/off
+        },
+        // individual modules
+        ui: false, // true/false
+        tailwind: false, // true/false (ignored, if ui=true)
+        neon: false, // true/false
+        supabase: false, // true/false
+        i18n: false, // true/false
+        formkit: false, // true/false
+        content: false, // true/false
+        openprops: false, // true/false
+      },
+
+      // logging
+      logLevel: 'info',
+    },
+  },
+})
+
+// https://nuxt.com/docs/getting-started/configuration#nuxt-configuration
+// @ts-expect-error unknown object type
+// TODO elaborate correct type for "nuxtConfig" object
+export default defineNuxtConfig(nuxtConfig)

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "nuxt-ignis",
+  "version": "0.1.0",
+  "description": "Enhanced and customizable Nuxt application starter pack",
+  "repository": "github:AloisSeckar/nuxt-ignis",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "analyze": "nuxt analyze",
+    "eslint": "eslint .",
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "start": "nuxt start"
+  },
+  "dependencies": {
+    "@formkit/nuxt": "1.6.9",
+    "@nuxt/content": "2.13.4",
+    "@nuxt/eslint": "0.7.2",
+    "@nuxt/image": "1.8.1",
+    "@nuxt/ui": "2.19.2",
+    "@nuxtjs/i18n": "9.1.0",
+    "@nuxtjs/supabase": "1.4.3",
+    "@nuxtjs/tailwindcss": "6.12.2",
+    "@pinia/nuxt": "0.8.0",
+    "@vueuse/core": "12.0.0",
+    "@vueuse/nuxt": "12.0.0",
+    "consola": "3.2.3",
+    "defu": "6.1.4",
+    "nuxt": "3.14.1592",
+    "nuxt-neon": "0.1.2",
+    "nuxt-security": "2.1.5",
+    "nuxt-time": "1.0.3",
+    "open-props": "1.7.7",            
+    "pinia": "2.2.8",
+    "postcss-jit-props": "1.0.14",    
+    "typescript": "5.7.2",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "packageManager": "pnpm@9.14.4"
+}

package/pages/index.vue

@@ -0,0 +1,51 @@
+<!--
+    https://nuxt.com/docs/guide/directory-structure/pages
+
+    An example of Nuxt page.
+    Nuxt automaticaly provides routing and displays this page when user visits root URL or `/index`.
+
+    AppFeature
+     - an example usage of auto-imported Nuxt component declared in `/components` directory
+     - the text is (usually) being loaded localized via nuxtjs/i18n module
+     - features are being displayed conditionally according to current setting
+    
+    NuxtLink
+     - special component for improved handling for HTML links (<a> tags)
+-->
+
+<template>
+  <div>
+    <div class="m-auto my-4 w-3/5 flex flex-col">
+      <AppFeature :text="useT('features.nuxt')" />
+      <AppFeature :text="useT('features.security')" />
+      <AppFeature :text="useT('features.image')" />
+      <AppFeature :text="useT('features.pinia')" />
+      <AppFeature :text="useT('features.vueuse')" />
+      <AppFeature :text="useT('features.consola')" />
+      <AppFeature v-if="ui === 'nuxt-ui'" :text="useT('features.ui')" />
+      <AppFeature v-if="ui !== 'off'" :text="useT('features.tailwind')" />
+      <AppFeature v-if="ui === 'nuxt-ui'" :text="useT('features.icon')" />
+      <AppFeature v-if="db === 'supabase'" :text="useT('features.supabase')" />
+      <AppFeature v-if="db === 'neon'" :text="useT('features.neon')" />
+      <AppFeature v-if="i18n" :text="useT('features.i18n')" />
+      <AppFeature v-if="formkit" :text="useT('features.formkit')" />
+      <AppFeature v-if="content" :text="useT('features.content')" />
+      <AppFeature v-if="openprops" class="openprops-feature" :text="useT('features.openprops')" />
+    </div>
+    <div class="link">
+      <NuxtLink to="/second">
+        {{ useT("goto2") }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const setup = useRuntimeConfig().public.ignis
+const ui = setup.ui
+const db = setup.db
+const i18n = setup.i18n
+const formkit = setup.formkit
+const content = setup.content
+const openprops = setup.openprops
+</script>

package/pages/second.vue

@@ -0,0 +1,27 @@
+<!--
+    https://nuxt.com/docs/guide/directory-structure/pages
+
+    This page appears under URL `/second`
+
+    NuxtImg
+    - special component for displaying images with NuxtImage module
+-->
+
+<template>
+  <div>
+    <div class="m-4">
+      {{ useT("page2") }}
+    </div>
+    <div class="m-4 flex flex-col items-center">
+      <NuxtImg src="/unsplash.jpg" width="400" />
+      <div class="text-xs">
+        {{ useT("image") }}
+      </div>
+    </div>
+    <div class="link">
+      <NuxtLink to="/">
+        {{ useT("goto1") }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>

package/tailwind.config.ts

@@ -0,0 +1,28 @@
+// https://tailwindcss.com/docs/configuration
+// https://tailwindcss.com/docs/plugins
+
+import plugin from 'tailwindcss/plugin'
+
+module.exports = {
+  content: [
+    './src/**/*.{html,js,vue}',
+  ],
+  theme: {
+    // example of extending Tailwind CSS with custom color
+    extend: {
+      colors: {
+        feature: '#3CB371',
+      },
+    },
+  },
+  plugins: [
+    // example how to enable custom color class inside @apply directive
+    plugin(function ({ addComponents, theme }) {
+      addComponents({
+        '.text-feature': {
+          color: theme('colors.feature'),
+        },
+      })
+    }),
+  ],
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/guide/directory-structure/tsconfig
+{
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "noUncheckedIndexedAccess": true
+  }
+}

package/utils/consola.ts

@@ -0,0 +1,92 @@
+// centralized logging system
+// https://github.com/unjs/consola
+
+import type { LogLevel, LogObject } from 'consola/core'
+import { LogLevels, createConsola } from 'consola/core'
+import { consola } from 'consola'
+import { useDateFormat } from '@vueuse/core'
+
+// default instance to write into browser's console
+const defaultReporter = consola
+
+/**
+ * Logging object that is available across the app thanks to Nuxt auto-imports.
+ */
+export const log = createConsola({
+  level: LogLevels.debug,
+  reporters: [
+    {
+      log: (logObj) => {
+        // enhancing log with more info (i.e. time + relevant stack for warn/error)
+        const msg = transformLog(logObj)
+        // logs are being written into browser's console
+        // `logObj.type` = log level name = corresponing method on the logger (debug, info, warn, error, etc.)
+        defaultReporter[logObj.type](msg)
+      },
+    },
+  ],
+})
+
+/**
+ * Initialize logger functions.
+ * Called in app.vue's setup.
+ */
+export async function initConsola() {
+  // set default log level from config
+  const logLevel = useRuntimeConfig().public.logLevel
+  log.level = getLogLevel(logLevel)
+  defaultReporter.level = log.level
+  log.debug(`[consola] log level set to '${logLevel}'`)
+}
+
+/**
+ * Transform text values of logLevel
+ * to numeric equivalent used by consola.
+ */
+function getLogLevel(logLevel: string): LogLevel {
+  const logLevelString = logLevel.toLocaleLowerCase()
+  switch (logLevelString) {
+    case 'fatal': return LogLevels.fatal
+    case 'error': return LogLevels.error
+    case 'warn': return LogLevels.warn
+    case 'log': return LogLevels.log
+    case 'info': return LogLevels.info
+    case 'success': return LogLevels.success
+    case 'debug': return LogLevels.debug
+    case 'trace': return LogLevels.trace
+    case 'silent': return LogLevels.silent
+    case 'verbose': return LogLevels.verbose
+    default: log.fatal(`Invalid log level ${logLevel}`)
+      throw new Error(`Invalid log level ${logLevel}`)
+  }
+}
+
+/**
+ * Enhance received log object, which should be logged.
+ * Add current date+time and trim irrelevant call-stack for warn/errors.
+ * @param logObj Object to be logged
+ * @returns Enhanced object to be logged
+ */
+function transformLog(logObj: LogObject): string {
+  let logBody = logObj.args[0]
+  if (typeof logBody !== 'string') {
+    logBody = JSON.stringify(logBody)
+  }
+
+  const timestamp = useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss.SSS').value
+  logBody = timestamp + '\n' + logBody
+
+  if (logObj.level <= LogLevels.warn) {
+    const fullStack = new Error(logBody).stack
+    const filteredStack = fullStack?.split('\n    at ').filter(x => !x.includes('node_modules'))
+    const relevantStack = filteredStack?.slice(0, filteredStack.length - 3)
+    if (relevantStack?.length && logObj.level <= LogLevels.warn) {
+      if (logObj.level === LogLevels.warn) {
+        relevantStack[0] = relevantStack[0]!.replace('Error:', 'Warn:')
+      }
+      logBody = timestamp + '\n' + relevantStack.join('\n\tat ')
+    }
+  }
+
+  return logBody
+}

package/utils/ignis-types.ts

@@ -0,0 +1,21 @@
+/**
+ * Available variants for UI libraries.
+ * 
+ * `nuxt-ui` - full https://ui.nuxt.com/ via `@nuxt/ui` connector module **[RECOMMENDED]**
+ * 
+ * `tailwind` - only https://tailwindcss.com/ via `@nuxtjs/tailwindcss` connector module
+ * 
+ * `off` - no UI library **[DEFAULT]**
+ */
+export type UIOptions = 'nuxt-ui' | 'tailwind' | 'off'
+
+/**
+ * Available variants for Database connector.
+ * 
+ * `neon` - https://neon.tech/ via `nuxt-neon` connector module **[RECOMMENDED]**
+ *
+ * `supabase` - https://supabase.com/ via `@nuxtjs/supabase` connector module
+ * 
+ * `off` - no database module **[DEFAULT]**
+ */
+export type DBOptions = 'neon' | 'supabase' | 'off'