test: Add new files and configurations for Nuxt Hacker News project

test/integration/nuxt/hackernews/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+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

test/integration/nuxt/hackernews/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "@nuxt",
+  "rules": {
+    "vue/no-v-html": "off",
+    "vue/no-multiple-template-root": "off"
+  }
+}

test/integration/nuxt/hackernews/.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+package-lock.json
+.idea
+*.iml
+.nuxt
+.vscode
+.output
+
+public/manifest*.json
+public/sw.js
+public/workbox-sw*.js*
+
+CounterComponent.vue

test/integration/nuxt/hackernews/README.md

@@ -0,0 +1,66 @@
+# Nuxt Hacker News
+
+Hacker News clone built with [Nuxt](https://nuxt.com).
+
+<p align="center">
+  <a href="https://hn.nuxt.space" target="_blank">
+    <img width="1090" src="https://hn.nuxt.space/cover.jpg">
+    <br>
+    Live Demo
+  </a>
+</p>
+
+## Demo
+
+https://hn.nuxt.space
+
+> Hosted on [Vercel](https://vercel.com/): `npm run build`
+
+To disable server-side render for a page, simply append `?csr` to the URL, example: https://hn.nuxt.space/news/1?csr
+
+## Performance
+
+- Lighthouse [100/100](https://pagespeed.web.dev/report?url=https%3A%2F%2Fhackernews-git-nuxt3-nuxt-js.vercel.app%2Fnews%2F1) (Slow 4G / Mobile Moto G4)
+  - Interactive: 1.4s
+  - Total Blocking Time: 30ms
+
+## Features
+
+- Server Side Rendering
+- Vite-based hot module replacement (HMR) dev environment
+- Deploys anywhere with zero config (Vercel, Netlify, Cloudflare, etc.) powered by [Nitro](https://github.com/unjs/nitro)
+- Code Splitting
+- Prefetch/Preload JS + DNS + Data
+
+## Build Setup
+
+**Requires Node.js 14+**
+
+``` bash
+# install dependencies
+npm install # or yarn
+
+# serve in dev mode, with hot reload at localhost:3000
+npm run dev
+
+# build for production (server-side rendering)
+npm run build
+
+# serve in production mode (server-side rendering)
+npm start
+
+# validate and fix with ESLint (with Prettier)
+npm run lintfix
+```
+
+## Links
+
+For the Nuxt 2 version, check out the [`nuxt2` branch](https://github.com/nuxt/hackernews/tree/nuxt2)
+
+## License
+
+MIT
+
+## Credits
+
+This repository is originally ported from [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0)

test/integration/nuxt/hackernews/app.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+useSeoMeta({
+  titleTemplate: 'Nuxt HN | %s',
+  description: 'HackerNews clone built with Nuxt.',
+  ogImage: 'https://hn.nuxt.space/cover.jpg',
+  ogImageAlt: 'Nuxt Hackernews',
+  twitterImage: 'https://hn.nuxt.space/cover.jpg',
+  twitterSite: '@nuxt_js',
+  twitterCreator: '@nuxt_js',
+  twitterCard: 'summary_large_image',
+})
+useHead({
+  link: [
+    { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }
+  ]
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

test/integration/nuxt/hackernews/components/Counter1.txt

@@ -0,0 +1,75 @@
+<template>
+  <div id="counter-fixture" class="rounded-bl-full">
+    <p>Count A: {{ count }}</p>
+    <button class="inc" @click="increment">
+      +
+    </button>
+    <button class="dec" @click="decrement">
+      -
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0,
+    };
+  },
+  mounted() {
+    console.log('counter a');
+  },
+  methods: {
+    increment() {
+      this.count++;
+    },
+    decrement() {
+      this.count--;
+    },
+  },
+};
+</script>
+
+<style lang="postcss">
+#counter-fixture {
+  color: #fff;
+  margin-left: 2rem;
+  padding: 10px;
+  border: 1px solid #ccc;
+  text-align: center;
+}
+
+#counter-fixture p {
+  margin: 10px 0;
+  font-size: 1.2rem;
+}
+
+button {
+  background-color: #4caf50;
+  /* Tailwind green */
+  color: white;
+  padding: 8px 15px;
+  margin: 5px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+button.dec {
+  background-color: #f44336;
+  /* Tailwind red */
+}
+
+button.dec:hover {
+  background-color: #d32f2f;
+}
+
+.rounded-bl-full {
+  border-bottom-left-radius: 9999px;
+}
+</style>

test/integration/nuxt/hackernews/components/Counter2.txt

@@ -0,0 +1,75 @@
+<template>
+  <div id="counter-fixture" class="rounded-br-full">
+    <p>Count B: {{ count }}</p>
+    <button class="inc" @click="increment">
+      +
+    </button>
+    <button class="dec" @click="decrement">
+      -
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0,
+    };
+  },
+  mounted() {
+    console.log('counter b loaded');
+  },
+  methods: {
+    increment() {
+      this.count += 2;
+    },
+    decrement() {
+      this.count -= 2;
+    },
+  },
+};
+</script>
+
+<style lang="postcss">
+#counter-fixture {
+  color: #fff;
+  margin-left: 2rem;
+  padding: 10px;
+  border: 1px solid #ccc;
+  text-align: center;
+}
+
+#counter-fixture p {
+  margin: 10px 0;
+  font-size: 1.2rem;
+}
+
+button {
+  background-color: #4caf50;
+  /* Tailwind green */
+  color: white;
+  padding: 8px 15px;
+  margin: 5px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+button.dec {
+  background-color: #f44336;
+  /* Tailwind red */
+}
+
+button.dec:hover {
+  background-color: #d32f2f;
+}
+
+.rounded-bl-full {
+  border-bottom-left-radius: 9999px;
+}
+</style>

test/integration/nuxt/hackernews/components/CounterComponent.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="counter-fixture" class="rounded-br-full">
+    <p>Count B: {{ count }}</p>
+    <button class="inc" @click="increment">
+      +
+    </button>
+    <button class="dec" @click="decrement">
+      -
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0,
+    };
+  },
+  mounted() {
+    console.log('counter b loaded');
+  },
+  methods: {
+    increment() {
+      this.count += 2;
+    },
+    decrement() {
+      this.count -= 2;
+    },
+  },
+};
+</script>
+
+<style lang="postcss">
+#counter-fixture {
+  color: #fff;
+  margin-left: 2rem;
+  padding: 10px;
+  border: 1px solid #ccc;
+  text-align: center;
+}
+
+#counter-fixture p {
+  margin: 10px 0;
+  font-size: 1.2rem;
+}
+
+button {
+  background-color: #4caf50;
+  /* Tailwind green */
+  color: white;
+  padding: 8px 15px;
+  margin: 5px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+button.dec {
+  background-color: #f44336;
+  /* Tailwind red */
+}
+
+button.dec:hover {
+  background-color: #d32f2f;
+}
+
+.rounded-bl-full {
+  border-bottom-left-radius: 9999px;
+}
+</style>