create-nuxt-base 0.1.0

package/.github/workflows/publish.yml

@@ -0,0 +1,21 @@
+name: Publish
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 18
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18.14.1
+      - run: npm install
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          access: public
+          token: ${{ secrets.NPM_TOKEN }}

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 lenne.Tech
+
+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,13 @@
+# Nuxt Starter
+This is a starter template to create a Nuxt 3 development environment including Tailwind, Pinia, VueUse, Nuxt Base, Eslint and optionally Cypress, Unit Tests and Storybook.
+
+Just run the following command to create your Nuxt environment:
+
+```bash
+npx @lenne.tech/nuxt-base-starter my-awesome-project
+```
+## Options
+To add Tests and storybook to your environment you can add the following flags:
+```bash
+npx @lenne.tech/nuxt-base-starter --tests --storybook my-awesome-project
+```

package/index.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+
+async function create() {
+  const spawn = require("cross-spawn");
+  const fs = require("fs");
+  const path = require("path");
+  const childProcess = require("child_process");
+
+  const projectName = process.argv[2];
+
+  if (!projectName) {
+    console.error("Please provide a valid project name.");
+    process.exit(-1);
+    return;
+  }
+
+  const currentDir = process.cwd();
+  const projectDir = path.resolve(currentDir, projectName);
+
+  if (fs.existsSync(projectDir)) {
+    console.log(`❌  Directory with name ${projectName} already exists.`);
+    process.exit(-1);
+  }
+
+  await copyFiles("./nuxt-base-template", projectDir);
+
+  const projectPackageJson = require(path.join(projectDir, "package.json"));
+
+  // Update the project's package.json with the new project name
+  projectPackageJson.name = projectName;
+
+  fs.writeFileSync(
+    path.join(projectDir, "package.json"),
+    JSON.stringify(projectPackageJson, null, 2)
+  );
+
+  process.chdir(projectName);
+
+  const gitInit = childProcess.exec("git init");
+  await waitForChildProcess(gitInit);
+
+  console.log("Installing dependencies ...");
+  const npmInstall = spawn("npm", ["install"], { stdio: "inherit" });
+  await waitForSpawn(npmInstall);
+
+  const preCommitHook = spawn("npx", [
+    "npx",
+    "husky",
+    "add",
+    ".husky/pre-commit",
+    '"npm run lint"',
+  ]);
+  await waitForSpawn(preCommitHook);
+
+  const gitAdd = childProcess.exec("git add .husky/pre-commit");
+  await waitForChildProcess(gitAdd);
+
+  console.log("Building Project ...");
+  const npmRunBuild = spawn("npm", ["run", "build"], { stdio: "inherit" });
+  await waitForSpawn(npmRunBuild)
+    .then(() => console.log("✅  Project was successfully built"))
+    .catch(() => console.log("❌  Error while building the project"));
+
+  console.log("Success! Your new project is ready. 🎉");
+  console.log(`Created ${projectName} at ${projectDir} 💾`);
+  console.log(`Launching ${projectName} in: 3 💥`);
+  await waitForMS(1000);
+  console.log(`Launching ${projectName} in: 2 🔥`);
+  await waitForMS(1000);
+  console.log(`Launching ${projectName} in: 1 🧨`);
+  await waitForMS(1000);
+  console.log(`Launching ${projectName} ...  🚀`);
+  await waitForMS(1000);
+  const npmRunDev = spawn("npm", ["run", "dev"], { stdio: "inherit" });
+  await waitForSpawn(npmRunDev);
+}
+
+function waitForSpawn(spawn) {
+  return new Promise((resolve, reject) => {
+    spawn.on("exit", () => resolve(true));
+    spawn.on("error", () => reject());
+  });
+}
+
+function waitForMS(ms) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, ms);
+  });
+}
+
+function waitForChildProcess(process) {
+  return new Promise((resolve, reject) => {
+    process.stdout.on("data", (data) => {
+      resolve(data);
+    });
+    process.stdout.on("error", (err) => {
+      reject(err);
+    });
+  });
+}
+
+async function copyFiles(from, to) {
+  const fse = require("fs-extra");
+  try {
+    await fse.copy(from, to);
+    console.log("Copied nuxt base template successfully!");
+  } catch (err) {
+    console.error(err);
+    process.exit(-1);
+  }
+}
+
+create();

package/nuxt-base-template/.eslintrc

@@ -0,0 +1,4 @@
+{
+    "extends": "@antfu",
+    "plugins": ["vitest"]
+}

package/nuxt-base-template/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/nuxt-base-template/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

package/nuxt-base-template/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/vue3";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/nuxt-base-template/.vscode/settings.json

@@ -0,0 +1,27 @@
+{
+"nuxt.isNuxtApp": true,
+  "editor.formatOnSave": true,
+  "eslint.alwaysShowStatus": true,
+  "eslint.options": {
+      "extensions": [
+          ".html",
+          ".js",
+          ".vue",
+          ".jsx"
+      ]
+  },
+  "eslint.validate": [
+      "html",
+      "vue",
+      "javascript",
+      "javascriptreact",
+  ],
+  "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+  },
+  "[javascript]": {
+      "editor.formatOnSave": false
+  },
+  "eslint.format.enable": true,
+  "css.validate": false,
+}

package/nuxt-base-template/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/nuxt-base-template/cypress/e2e/spec.cy.ts

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

package/nuxt-base-template/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/nuxt-base-template/cypress/integrations/Test/Test.feature

@@ -0,0 +1,8 @@
+Feature: Feature Test
+
+    I want to test the site
+
+    Scenario: Navigate to site
+        Given I navigate to the website
+        When I enter site
+        Then Check title

package/nuxt-base-template/cypress/integrations/Test/test.spec.js

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable no-undef */
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('I navigate to the website', () => {
+    cy.visit('localhost:3000')
+})
+When('I enter site', () => {
+    cy.url().should('include', 'localhost')
+})
+Then('Check title', () => {
+    cy.get('h1').contains('Nuxt Starter')
+})

package/nuxt-base-template/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/nuxt-base-template/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/nuxt-base-template/cypress.config.ts

@@ -0,0 +1,54 @@
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor'
+import * as webpack from '@cypress/webpack-preprocessor'
+import { defineConfig } from 'cypress'
+
+async function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions,
+): Promise<Cypress.PluginConfigOptions> {
+  await addCucumberPreprocessorPlugin(on, config)
+
+  on(
+    'file:preprocessor',
+    webpack({
+      webpackOptions: {
+        resolve: {
+          extensions: ['.ts', '.js'],
+        },
+        module: {
+          rules: [
+            {
+              test: /\.ts$/,
+              exclude: [/node_modules/],
+              use: [
+                {
+                  loader: 'ts-loader',
+                },
+              ],
+            },
+            {
+              test: /\.feature$/,
+              use: [
+                {
+                  loader: '@badeball/cypress-cucumber-preprocessor/webpack',
+                  options: config,
+                },
+              ],
+            },
+          ],
+        },
+      },
+    }),
+  )
+
+  // Make sure to return the config object as it might have been modified by the plugin.
+  return config
+}
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents,
+    supportFile: false,
+    specPattern: ['cypress/e2e/**/*.cy.{js,ts}', 'cypress/integrations/**/*.feature'],
+  },
+})

package/nuxt-base-template/nuxt.config.ts

@@ -0,0 +1,8 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  srcDir: './src',
+  modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
+  imports: {
+    dirs: ['./states', './stores'],
+  },
+})