Merge pull request #185 from lazercaveman/update/v.2.0.0

# Release Notes v2.0.0

Focus: Migration to Nuxt 4, folder restructuring, dependency and tooling updates

## Breaking Changes
### Nuxt 4 Compatibility
- future.compatibilityVersion: 4 
- Repository restructured: all source folders moved under app/ (e.g. app/components, app/pages, app/, ...)

## New Features & Improvements
### 🤌 Cleanup Script
- yarn script:cleanup now empties content in app/ directories (components, tests, store, middleware, server/api)
-  Also deletes .git, .github, .vscode, SECURITY.md, LICENSE
- Script file and its npm entry self-delete after execution

### Added Example-Content (can conveniently be removed, using the Cleanup Script)
- NuxtStarter.vue and StarterButton.vue updated for new paths and store 
- Corresponding test files updated with revised import paths
- Main page: pages/index.vue → app/pages/demo.
- Added clean demo entry in app/pages/index.vue
- sampleStore moved to app/store/sample.ts and extended with apiGreeting state
- Components, pages, store, middleware and tests relocated and renamed under app/
- Example assets (screenshots, demo images) moved to app/assets
- Client middleware at app/middleware/demo.ts with console log
- Server middleware at server/middleware/demo.ts using H3Event hook
- New endpoint server/api/test.ts returning 👋 Hello from test API!

## Dependency Updates
- Nuxt: ^3.16.2 → ^3.17.4 (preparing for v4 final)
- ESLint: v9.25.1 → v9.28.0 (Flat Config, extended ignore patterns)
- Tailwind CSS: v4.1.4 → v4.1.8
- Vitest: v3.1.2 → v3.2.0
- @nuxt/devtools: v2.4.0 → v2.4.1
- Others: Pinia, Sass, TypeScript-ESLint, and more
 ### Build Config
- nuxt.config.ts: baseURL, head tags and module list updated
- eslint.config.ts: ignore list extended (.output, .yarn, etc.)
- vitest.config.ts: test include paths updated (app/components, app/tests)

## Summary
This release readies the codebase for Nuxt 4, cleans up folder structures, and brings multiple dependency and tooling upgrades. Developers can immediately adopt the new layout, use the cleanup script to strip demo content, and prepare for the upcoming Nuxt 4 final release.

Author: lazercaveman

.nvmrc

@@ -0,0 +1 @@
+22.15.0

README.md

@@ -1,16 +1,12 @@
 ![Release Badge](https://img.shields.io/github/v/release/lazercaveman/nuxt-starter)
-[![Nuxt 3](https://img.shields.io/badge/Nuxt-3.16.2-00DC82?logo=nuxt.js)](https://nuxt.com)
+[![Nuxt 4](https://img.shields.io/badge/Nuxt-3.16.2-00DC82?logo=nuxt.js)](https://nuxt.com)
 [![MIT License](https://img.shields.io/github/license/lazercaveman/nuxt-starter)](LICENSE)
 
-# Nuxt 3 Starter / (will switch to [Nuxt 4](https://github.com/lazercaveman/nuxt-starter/tree/update/v.2.0.0) Starter ASAP)
-
-> ### ⚡ **This repo will switch to Nuxt 4** as soon as it is officially released.  
-> ### 🔥 You can already preview and already download the Nuxt 4 version [here](https://github.com/lazercaveman/nuxt-starter/tree/update/v.2.0.0).
-
+# Nuxt 4 Starter (currently using future.compatibilityVersion 4 and will entirely switch to v4 ASAP)
 ![Screenshot](./assets/img/screenshot.png)
 
 ## 🥸 Why this template?  
-Get ready to supercharge your development with this fully configured Nuxt 3 Starter Kit! Built on Vue 3 and powered by TypeScript and many other technologies (for more information see down-below or checkout package.json for even more), this setup comes preloaded with tools and libraries designed to enhance your workflow, streamline development, and maintain high-quality code. 🙌 No more wrestling with configurations—jump straight into building amazing projects! 
+Get ready to supercharge your development with this fully configured Nuxt 4 Starter Kit! Built on Vue 3 and powered by TypeScript and many other technologies (for more information see down-below or checkout package.json for even more), this setup comes preloaded with tools and libraries designed to enhance your workflow, streamline development, and maintain high-quality code. 🙌 No more wrestling with configurations—jump straight into building amazing projects! 
 
 - **Clean up project in seconds:**  Using the `yarn script:cleanup` command in your terminal, will clean up the project, remove demo contents - the Starter Kit is designed so that developers can start working immediately without having to spend time setting up basic structures and configurations.
 - **Up to date:**  Using up to date dependencies and tools to ensure a smooth development experience. (at least I try ^^)
@@ -27,7 +23,7 @@ Get ready to supercharge your development with this fully configured Nuxt 3 Star
 5. Run `yarn dev` to start the local development environment
 
 ### 🧹 Comes with Auto-Clean-Script
-Nuxt-Starter is delivered with a range of example content – including sample components, tests, and store configurations. If you'd prefer to start with a clean setup, simply run the following CLI command in your terminal `yarn script:cleanup` - this command offers an easy, one-step process to prepare your Nuxt 3 project for a fresh start.
+Nuxt-Starter is delivered with a range of example content – including sample components, tests, and store configurations. If you'd prefer to start with a clean setup, simply run the following CLI command in your terminal `yarn script:cleanup` - this command offers an easy, one-step process to prepare your Nuxt 4 project for a fresh start.
 - It empties the contents of './components', './tests' and ./store while keeping the directories intact.
 - It completely deletes the './.assets/img', './coverage', './.github', './.vscode', './.git' folder, and all its contents. 🚨 Since the .git folder will be deleted your project will be disconnected from this repository.
 - The cleaning script is set up to delete itself after execution, ensuring that your project is as lean as possible once you’ve cleaned up the examples - therefor it will delete the script file as well as the npm script 'script:cleanup' from the package.json file.
@@ -43,7 +39,7 @@ Why? Because it’s blazing fast. Vite ensures instant builds and on-demand comp
 [learn more](https://vitejs.dev/).
 
 ### 🏗️ ESLint
-ESLint V9 with a "Flat Config setup" tailored for TypeScript and Vue 3 or Nuxt 3 - it is configured to use best practices integrating some plugins (eslint:recommended, typescript-eslint, and eslint-plugin-vue) - wanna change them!? just add some custom rules to meet your team's needs to ensure clean, maintainable, and standard-compliant code quality.
+ESLint V9 with a "Flat Config setup" tailored for TypeScript and Vue 3 or Nuxt 4 - it is configured to use best practices integrating some plugins (eslint:recommended, typescript-eslint, and eslint-plugin-vue) - wanna change them!? just add some custom rules to meet your team's needs to ensure clean, maintainable, and standard-compliant code quality.
 [learn more](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/).
 
 ### 🧪 Vitest
@@ -63,7 +59,7 @@ For flexibility in styling. Use SCSS to add custom styles when needed - SCSS def
 [learn more](https://sass-lang.com/).
 
 ### 🍍 Pinia
-To manage app state easily. Pinia is modern, simple, and works perfectly with Vue 3 and Nuxt 3, for scalable state management.
+To manage app state easily. Pinia is modern, simple, and works perfectly with Vue 3 and Nuxt 4, for scalable state management.
 [learn more](https://pinia.vuejs.org).
 
 ### 🤌 TypeScript

assets/README.md renamed to app/assets/README.md

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
-import NuxtStarter from '~/components/nuxt-starter/NuxtStarter.vue';
+import NuxtStarter from './NuxtStarter.vue';
 
 
 describe('NuxtStarter unit test', () => {

assets/img/screenshot.png renamed to app/assets/img/screenshot.png

@@ -0,0 +1,37 @@
+<template>
+  <nav class="flex gap-12">
+    <NuxtLink
+      :to="$route.name === 'demo' ? '/' : '/demo'"
+      class="px-6 py-3 w-fit rounded-sm bg-nuxt-green cursor-pointer transition-all hover:scale-up-transition"
+    >
+      🧭 Route: {{ $route.name }}
+    </NuxtLink>
+    <button
+      class="px-6 py-3 w-fit rounded-sm bg-nuxt-green cursor-pointer transition-all hover:scale-up-transition"
+      @click="changeSampleStoreData(`🥳 So let's go - create some epic stuff that will change the world!`)"
+    >
+      🍍 Pinia State
+    </button>
+    <button
+      class="px-6 py-3 w-fit rounded-sm bg-nuxt-green cursor-pointer transition-all hover:scale-up-transition"
+      @click="callTestApi(`🥳 So let's go - create some epic stuff that will change the world!`)"
+    >
+      ☎️ Call Api
+    </button>
+  </nav>
+</template>
+
+
+<script setup>
+import { useSampleStore } from '~/app/store/sample';
+
+const Store = useSampleStore();
+
+function changeSampleStoreData(testString) {
+  Store.setSampleData(testString);
+}
+
+function callTestApi() {
+  Store.callTestApi();
+}
+</script>

assets/style/animations.scss renamed to app/assets/style/animations.scss

@@ -1,15 +1,22 @@
 import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
-import StarterButton from '~/components/start-button/StarterButton.vue';
-
+import StarterButton from './StarterButton.vue';
 
 describe('StartButton unit test', () => {
   it('renders with required properties', () => {
     const wrapper = mount(StarterButton, {
       props: {},
       global: {
         plugins: [createTestingPinia()],
+        mocks: {
+          $route: {
+            name: 'demo',
+          },
+        },
+        stubs: {
+          NuxtLink: true,
+        },
       },
     });
 

assets/style/tailwind.css renamed to app/assets/style/tailwind.css

@@ -0,0 +1,20 @@
+<template>
+  😱 ERROR!
+  <p>{{ error }}</p>
+</template>
+
+<script lang="ts" setup>
+import type { NuxtError } from 'nuxt/app';
+
+const props = defineProps({
+  error: {
+    type: Object as () => NuxtError,
+    default: () => ({} as NuxtError),
+  },
+});
+
+onMounted (() => {
+  console.error(props.error)
+})
+
+</script>