🚀 initial commit

richardevcom · Feb 15, 2023 · b47220d · b47220d
commit b47220d
Show file tree

Hide file tree

Showing 30 changed files with 636 additions and 0 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+/* 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",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  env: {
+    node: true,
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,31 @@
+# .env
+.env.production
+
+# 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?
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,53 @@
+# Vue.js 3 TypeScript Boilerplate
+
+This Vue.js 3 boilerplate is written in TypeScript and includes Pinia, Vue Router and Tailwind CSS.
+
+## Customize configuration
+
+See [Tailwind CSS Configuration](https://tailwindcss.com/docs/configuration).
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+vite
+npm run dev
+```
+
+### Locally preview build
+
+```sh
+vite preview
+npm run preview
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Build only
+
+```sh
+vite build
+npm run build-only
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
+
+### Check types
+
+```sh
+npm run type-check
+```
diff --git a/env.d.ts b/env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string;
+  // more env variables...
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Primary Meta Tags -->
+    <title>Vue TS Boilerplate</title>
+    <meta name="title" content="Vue TS Boilerplate" />
+    <meta
+      name="description"
+      content="Vue.js 3 TypeScript Boilerplate with Pinia, Vue Router and Tailwind CSS"
+    />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://metatags.io/" />
+    <meta property="og:title" content="Vue TS Boilerplate" />
+    <meta
+      property="og:description"
+      content="Vue.js 3 TypeScript Boilerplate with Pinia, Vue Router and Tailwind CSS"
+    />
+    <meta property="og:image" content="https://picsum.photos/id/3/1200/630" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://metatags.io/" />
+    <meta property="twitter:title" content="Vue TS Boilerplate" />
+    <meta
+      property="twitter:description"
+      content="Vue.js 3 TypeScript Boilerplate with Pinia, Vue Router and Tailwind CSS"
+    />
+    <meta
+      property="twitter:image"
+      content="https://picsum.photos/id/3/1200/630"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "vue-ts-boilerplate",
+  "version": "0.1.2",
+  "private": true,
+  "author": "richardevcom <[email protected]> (https://richardev.com)",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "pinia": "^2.0.28",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^18.11.12",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.21",
+    "prettier": "^2.7.1",
+    "sass": "^1.58.1",
+    "tailwindcss": "^3.2.6",
+    "typescript": "~4.7.4",
+    "vite": "^4.0.0",
+    "vue-tsc": "^1.0.12"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from "vue-router";
+import HelloWorld from "./components/HelloWorld.vue";
+import LogoSVG from "./components/svg/LogoSVG.vue";
+</script>
+
+<template>
+  <header class="lg:flex place-items-center max-h-screen pr-20 leading-8">
+    <LogoSVG alt="Vue logo" class="lg:m-0 lg:mr-8 block mx-auto mt-0" />
+
+    <div class="lg:flex lg:place-items-start lg:flex-wrap">
+      <HelloWorld msg="You did it!" />
+
+      <nav
+        class="lg:text-left lg:-ml-4 lg:text-base lg:px-0 lg:py-4 lg:mt-4 w-full mt-8 text-xs text-center"
+      >
+        <RouterLink
+          class="first-of-type:border-0 inline-block px-4 py-0 border border-l border-gray-600"
+          to="/"
+          >Home</RouterLink
+        >
+        <RouterLink
+          class="first-of-type:border-0 inline-block px-4 py-0 border border-l border-gray-600"
+          to="/about"
+          >About</RouterLink
+        >
+      </nav>
+    </div>
+  </header>
+
+  <RouterView />
+</template>
+
+<style scoped lang="scss">
+nav a {
+  &.router-link-exact-active {
+    @apply text-gray-800 dark:text-white;
+
+    &:hover {
+      @apply bg-transparent;
+    }
+  }
+}
+</style>
diff --git a/src/assets/base.scss b/src/assets/base.scss
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    @apply box-border m-0 relative font-normal;
+  }
+
+  body {
+    @apply min-h-screen  text-gray-800 bg-white transition-colors duration-500 leading-6 font-sans text-base antialiased;
+    @apply xl:flex xl:place-items-center;
+    @apply dark:text-gray-400 dark:bg-gray-900;
+    text-rendering: optimizeLegibility;
+  }
+
+  #app {
+    @apply max-w-7xl p-8 mx-auto my-0 font-normal;
+    @apply xl:grid xl:grid-cols-2 xl:gap-x-8 xl:py-0 xl:px-8;
+  }
+
+  a {
+    @apply no-underline text-jade-500 duration-400;
+
+    &:hover {
+      @apply hover-hover:bg-jade-900;
+    }
+  }
+}
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string;
+}>();
+</script>
+
+<template>
+  <h1 class="text-4xl font-medium -top-2.5 text-center lg:text-left">
+    {{ msg }}
+  </h1>
+  <h3 class="lg:text-left text-xl text-center">
+    You’ve successfully created a project with
+    <a href="https://vitejs.dev/" class="" target="_blank" rel="noopener"
+      >Vite</a
+    >
+    +
+    <a href="https://vuejs.org/" class="" target="_blank" rel="noopener"
+      >Vue 3</a
+    >. What's next?
+  </h3>
+</template>