nuxt-spec 0.0.1

package/.gitattributes

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

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,51 @@
+# Nuxt Spec
+
+![Nuxt Spec](https://github.com/AloisSeckar/nuxt-spec/blob/main/public/nuxt-spec.png)
+
+**Nuxt Spec** (aka `nuxt-spec`) is a base layer for [Nuxt](https://nuxt.com/) applications incorporating together a couple of testing libraries and packages and providing some utility functions. I created this project in early 2025 because I was unable to find a convenient "one-dependency" way to start testing my Nuxt apps and I didn't want to repeat the same steps and maintain the same set of dependencies over and over. 
+
+While Nuxt itself does have a [dedicated module for testing](https://nuxt.com/docs/getting-started/testing), to remain as versatile as possible, it has to be combined with other packages (which can be different based on your choice). I am trying to overcome this by defining "the way". This is both the strength and the weakness of this project. You were warned.
+
+The most important client of `nuxt-spec` is my [Nuxt Ignis](https://github.com/AloisSeckar/nuxt-ignis) template starter that adds up even more ready-to-use cool stuff for your future awesome Nuxt websites.
+
+
+## How to use
+
+Aside from being "forked" and used as you seem fit, `nuxt-spec` is also available as an [NPM package](https://www.npmjs.com/package/nuxt-spec) that can be referenced as a single-import with all the features incoming.
+
+1) Add following dependency into your `package.json`:
+```
+"nuxt-spec": "0.0.1"
+```
+
+2) Add following section into your `nuxt.config.ts`:
+```
+extends: [
+  'nuxt-spec'
+]
+```
+
+3) Add `.npmrc` file with following content (if you don't have it yet):
+```
+shamefully-hoist=true
+strict-peer-dependencies=false
+```
+
+You are just `npm install` and `npm run dev` away from testing your Nuxt projects!
+
+
+## Overview
+
+**Nuxt T(est)** currently contains:
+- [vitest](https://www.npmjs.com/package/vitest) as the fundamental testing framework
+- [happy-dom](https://www.npmjs.com/package/happy-dom) as the headless browser runtime
+- [@vue/test-utils](https://www.npmjs.com/package/@vue/test-utils) for testing Vue stuff
+- [@nuxt/test-utils](https://www.npmjs.com/package/@nuxt/test-utils) for testing Nuxt stuff
+
+Planned future content:
+- [backstopjs](https://www.npmjs.com/package/backstopjs) as the solution for visual testing
+
+
+## Contact
+
+Use GitHub issues to report bugs or suggest improvements. I will be more than happy to address them.

package/app.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <h1>Nuxt T(est)</h1>
+    <div>
+      Test-pack layer for <a href="https://nuxt.com/">Nuxt</a> Applications
+    </div>
+  </div>
+</template>

package/components/NuxtTestComponent.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    {{ text }}
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({ text: String })
+</script>

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/nuxt.config.ts

@@ -0,0 +1,14 @@
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/eslint',
+    '@nuxt/test-utils/module',
+  ],
+
+  compatibilityDate: '2025-01-18',
+
+  eslint: {
+    config: {
+      stylistic: true,
+    },
+  },
+})

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "nuxt-spec",
+  "version": "0.0.1",
+  "description": "Test-pack layer for Nuxt Applications",
+  "repository": "github:AloisSeckar/nuxt-spec",
+  "license": "MIT",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "analyze": "nuxt analyze",
+    "eslint": "eslint .",
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "start": "nuxt start",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@nuxt/test-utils": "3.15.4",
+    "@vue/test-utils": "2.4.6",
+    "happy-dom": "16.6.0",
+    "vitest": "3.0.2"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "0.7.5",
+    "nuxt": "3.15.2",
+    "typescript": "latest"
+  },
+  "packageManager": "pnpm@9.15.4"
+}

package/test/nuxt.test.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import NuxtTestComponent from '../components/NuxtTestComponent.vue'
+
+describe('NuxtTestComponent', () => {
+  it('component renders text properly', () => {
+    const wrapper = mount(NuxtTestComponent, {
+      propsData: {
+        text: 'nuxt-spec',
+      },
+    })
+    expect(wrapper.text()).toContain('nuxt-spec')
+  })
+})

package/test/vitest.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest'
+
+test('vitest should run', () => {
+  expect(1).toBe(1)
+})

package/tsconfig.json

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

package/utils/vitest-utils.ts

@@ -0,0 +1,5 @@
+// Element.checkVisibility() is not available in Vitest
+global.Element.prototype.checkVisibility = function () {
+  // in tests we allways just assume the element is visible
+  return true
+}

package/vitest.config.mts

@@ -0,0 +1,8 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+  test: {
+    environment: 'nuxt',
+    setupFiles: ['./utils/vitest-utils.ts'],
+  },
+})