Initial Commit

.eslintrc.cjs

@@ -0,0 +1,21 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
+  overrides: [
+    {
+      files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
+      extends: ["plugin:cypress/recommended"],
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};

.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Custom Files
+2Do.txt

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint"
+  ]
+}

README.md

@@ -1,2 +1,123 @@
-# dim-vue3-template
-Vue 3 + Vite Starter
+# Vue 3 Starter
+
+- [Vue 3](https://vuejs.org/) + [Vite](https://vitejs.dev/) Minimalistic Starter Template
+- Uses [TypeScript](https://www.typescriptlang.org/) and [Script Setup SFC](https://vuejs.org/api/sfc-script-setup.html)
+  <br/><br/>
+
+## Features
+
+- Full configured and ready
+- No complex || heavy dependencies
+- Atomic Design Patter
+- Pre-configured HTML index page (including SEO-metatags and No-Script section)
+- Prepared public folder (icons, robots.txt, htaccess, humans.txt, etc)
+- CSS normalization
+- SCSS Maps and Modules in global scope
+- Configured router (including transitions, navigation guards and 404 page)
+- Simple code examples for Storage, Composables, TypeScript, Modules
+- ESLint + Prettier for better code quality
+- Cypress + Vitest for testing
+  <br/><br/>
+
+## Preview
+
+[Live Demo](http://vue3-template.demetrey.ru/)
+<br/>
+<br/>
+![image](/public/cover.jpg)
+
+<br/><br/>
+
+## Requirements
+
+- [Node.js](https://nodejs.org/en/): >= 16.11.0
+- [npm](https://www.npmjs.com/): >= 6.32.4
+  <br/><br/>
+
+## Recommended IDE
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+  <br/><br/>
+
+## Installed Modules
+
+- [Pinia](https://pinia.vuejs.org/) &rarr; Storage
+- [Axios](https://axios-http.com/) &rarr; Promise based HTTP client
+- [VueUse](https://vueuse.org/) &rarr; Best Collection of Vue Composition Utilities
+- [SASS](https://sass-lang.com/) &rarr; CSS Preprocessor
+- [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) &rarr; linting and code formatting
+- [Cypress](https://www.cypress.io/) &rarr; End-to-End (e2e) testing framework
+- [Vitest](https://vitest.dev/) &rarr; Unit testing framework
+  <br/><br/>
+
+## Scripts
+
+### Clone repo
+
+```bash
+git clone https://github.com/Demetory/dim-vue3-template
+```
+
+### Install and update dependencies
+
+```bash
+npm install
+```
+
+Update deps if needed
+
+```bash
+npm update
+```
+
+### Development
+
+Start the development server on http://localhost:5173
+
+```bash
+npm run dev
+```
+
+### Build for Production
+
+Build with type-check:
+
+```bash
+npm run build
+```
+
+or just for build only
+
+```bash
+npm run build-only
+```
+
+### Linting
+
+```bash
+npm run lint
+```
+
+```bash
+npm run type-check
+```
+
+### Testing
+
+Vitest unit testing
+
+```bash
+npm run test:unit
+```
+
+Cypress e2e-testing
+
+```bash
+npm run test:e2e
+```
+
+<br/><br/>
+
+## License
+
+MIT [@demetory](https://demetrey.ru)

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
+    baseUrl: "http://localhost:4173",
+  },
+});

cypress/e2e/example.cy.ts

@@ -0,0 +1,8 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe("My First Test", () => {
+  it("visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("h1", "You did it!");
+  });
+});

cypress/e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["./**/*", "../support/**/*"],
+  "compilerOptions": {
+    "isolatedModules": false,
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  }
+}

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"
+}

cypress/support/commands.ts

@@ -0,0 +1,39 @@
+/// <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>
+//     }
+//   }
+// }
+
+export {};

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js 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')

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <!--
+           design the planet
+
+          _/_/_/_/_/_/  
+         _/_/      _/_/  
+        _/_/        _/_/   
+       _/_/      _/_/_/  
+      _/_/        _/_/   
+     _/_/      _/_/    _/_/
+    _/_/_/_/_/_/      _/_/
+
+    demetrey.ru
+    -->
+    <title>Dim Vue3 Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Dim Vue3 Starter Template" />
+
+    <meta property="og:title" content="Demetory - Design the Planet" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="/" />
+    <meta property="og:image" content="/cover.jpg" />
+
+    <link rel="author" href="/humans.txt" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="apple-touch-icon" href="/icon.png" />
+    <link rel="icon" href="/favicon.ico" />
+
+    <link rel="stylesheet" href="/css/reset.css" />
+    <link rel="stylesheet" href="/css/noscript.css" />
+  </head>
+
+  <body>
+    <!--noindex-->
+    <noscript>
+      <img src="/images/fatality.svg" />
+      <div>
+        <h1>Easy, Tiger</h1>
+        <p>Turn JavaScript on, don't be so paraniod.</p>
+      </div>
+    </noscript>
+    <!--/noindex-->
+
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+
+  <!-- #StandWithUkraine -->
+</html>