Paradnight Studio Website

Code for Paradnight Studio's website: https://www.paradnight-studio.com/

Steps to install libraries

1. Install Nuxt

pnpm dlx nuxi@latest init paradnight-website

2. Add Eslint

https://eslint.nuxt.com/packages/module

Add Nuxt ESLint module:

npx nuxi module add eslint

Create an eslint.config.mjs file with this content:

import withNuxt from "./.nuxt/eslint.config.mjs";

export default withNuxt();

Add TypeScript too:

pnpm add -D typescript

3. Add Prettier

https://prettier.io/docs/en/install

Install Prettier:

pnpm add --save-dev --save-exact prettier

Create .prettierrc file:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Create .prettierignore file:

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

And add this to .prettierignore:

dist
coverage
.vscode/settings.json
.output
.nuxt
pnpm-lock.yaml

Install eslint-config-prettier:

pnpm add --save-dev eslint-config-prettier

3. Add Stylelint

https://nuxt.com/modules/stylelint

Install Stylelint:

pnpm add -D stylelint

Add Nuxt module and stylelint-config-standard-vue and stylelint-config-standard-scss:

pnpm add -D @nuxtjs/stylelint-module
pnpm add stylelint-config-standard-vue stylelint-config-standard-scss --save-dev

Add to nuxt.config.ts:

  stylelint: {
    config: {
      extends: ["stylelint-config-standard-scss", "stylelint-config-standard-vue/scss"],
      rules: {
        "declaration-property-unit-allowed-list": {
          "/^border/": ["px"],
          "/^padding|^gap/": ["rem"],
        },
        "unit-allowed-list": ["%", "deg", "px", "rem", "ms", "fr", "vh", "vw"],
        "no-empty-source": null,
      },
    },
  },

4. Use SCSS

https://nuxt.com/docs/getting-started/styling#using-preprocessors

Install sass:

pnpm add -D sass

5. Testing (Vitest + Vue Testing Library)

https://nuxt.com/docs/getting-started/testing https://testing-library.com/docs/vue-testing-library/intro

pnpm add -D @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core @testing-library/vue

Add Nuxt Test Utils module to the config:

export default defineNuxtConfig({
  modules: ["@nuxt/test-utils/module"],
});

Create a vitest.config.ts file:

import { defineVitestConfig } from "@nuxt/test-utils/config";

export default defineVitestConfig({
  // any custom Vitest config you require
});

5.1 Install @testing-library/jest-dom to be able to use custom Jest matchers:

https://github.com/testing-library/jest-dom?tab=readme-ov-file#with-vitest

pnpm add -D @testing-library/jest-dom

Create a tests/vitest.setup.ts with this content:

// https://github.com/testing-library/jest-dom?tab=readme-ov-file#with-vitest
import "@testing-library/jest-dom/vitest";

And add the path of this setup file to vitest.config.ts:

export default defineVitestConfig({
  test: {
    // https://github.com/testing-library/jest-dom?tab=readme-ov-file#with-vitest
    setupFiles: ["tests/vitest.setup.ts"],
  },
});

6. Load custom fonts:

https://fonts.nuxt.com/get-started/installation

npx nuxi@latest module add fonts

7. How to add and use new SVG icons

• Download the svg file to assets/icons
• Import it by using a import { Svgo[SvgFileNameInCamelCase] } from "#components"; import
  • e.g.: If the file name is is bluesky.svg, use import { SvgoBluesky } from "#components";

Nuxt README:

Nuxt 3 Minimal Starter

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview

Check out the deployment documentation for more information.