Skip to content

Commit b47220d

Browse files
richardevcomrichardevcom
committed
🚀 initial commit
0 parents  commit b47220d

30 files changed

+636
-0
lines changed

‎.eslintrc.cjs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* eslint-env node */
2+
require("@rushstack/eslint-patch/modern-module-resolution");
3+
4+
module.exports = {
5+
root: true,
6+
extends: [
7+
"plugin:vue/vue3-essential",
8+
"eslint:recommended",
9+
"@vue/eslint-config-typescript",
10+
"@vue/eslint-config-prettier",
11+
],
12+
parserOptions: {
13+
ecmaVersion: "latest",
14+
},
15+
env: {
16+
node: true,
17+
},
18+
};

‎.gitignore

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# .env
2+
.env.production
3+
4+
# Logs
5+
logs
6+
*.log
7+
npm-debug.log*
8+
yarn-debug.log*
9+
yarn-error.log*
10+
pnpm-debug.log*
11+
lerna-debug.log*
12+
13+
node_modules
14+
.DS_Store
15+
dist
16+
dist-ssr
17+
coverage
18+
*.local
19+
20+
/cypress/videos/
21+
/cypress/screenshots/
22+
23+
# Editor directories and files
24+
.vscode/*
25+
!.vscode/extensions.json
26+
.idea
27+
*.suo
28+
*.ntvs*
29+
*.njsproj
30+
*.sln
31+
*.sw?

‎.prettierrc.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"tabWidth": 2,
3+
"useTabs": false
4+
}

‎.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3+
}

‎README.md

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Vue.js 3 TypeScript Boilerplate
2+
3+
This Vue.js 3 boilerplate is written in TypeScript and includes Pinia, Vue Router and Tailwind CSS.
4+
5+
## Customize configuration
6+
7+
See [Tailwind CSS Configuration](https://tailwindcss.com/docs/configuration).
8+
See [Vite Configuration Reference](https://vitejs.dev/config/).
9+
10+
## Project Setup
11+
12+
```sh
13+
npm install
14+
```
15+
16+
### Compile and Hot-Reload for Development
17+
18+
```sh
19+
vite
20+
npm run dev
21+
```
22+
23+
### Locally preview build
24+
25+
```sh
26+
vite preview
27+
npm run preview
28+
```
29+
30+
### Type-Check, Compile and Minify for Production
31+
32+
```sh
33+
npm run build
34+
```
35+
36+
### Build only
37+
38+
```sh
39+
vite build
40+
npm run build-only
41+
```
42+
43+
### Lint with [ESLint](https://eslint.org/)
44+
45+
```sh
46+
npm run lint
47+
```
48+
49+
### Check types
50+
51+
```sh
52+
npm run type-check
53+
```

‎env.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="vite/client" />
2+
interface ImportMetaEnv {
3+
readonly VITE_APP_TITLE: string;
4+
// more env variables...
5+
}

‎index.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- Primary Meta Tags -->
8+
<title>Vue TS Boilerplate</title>
9+
<meta name="title" content="Vue TS Boilerplate" />
10+
<meta
11+
name="description"
12+
content="Vue.js 3 TypeScript Boilerplate with Pinia, Vue Router and Tailwind CSS"
13+
/>
14+
15+
<!-- Open Graph / Facebook -->
16+
<meta property="og:type" content="website" />
17+
<meta property="og:url" content="https://metatags.io/" />
18+
<meta property="og:title" content="Vue TS Boilerplate" />
19+
<meta
20+
property="og:description"
21+
content="Vue.js 3 TypeScript Boilerplate with Pinia, Vue Router and Tailwind CSS"
22+
/>
23+
<meta property="og:image" content="https://picsum.photos/id/3/1200/630" />
24+
25+
<!-- Twitter -->
26+
<meta property="twitter:card" content="summary_large_image" />
27+
<meta property="twitter:url" content="https://metatags.io/" />
28+
<meta property="twitter:title" content="Vue TS Boilerplate" />
29+
<meta
30+
property="twitter:description"
31+
content="Vue.js 3 TypeScript Boilerplate with Pinia, Vue Router and Tailwind CSS"
32+
/>
33+
<meta
34+
property="twitter:image"
35+
content="https://picsum.photos/id/3/1200/630"
36+
/>
37+
</head>
38+
<body>
39+
<div id="app"></div>
40+
<script type="module" src="/src/main.ts"></script>
41+
</body>
42+
</html>

‎package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "vue-ts-boilerplate",
3+
"version": "0.1.2",
4+
"private": true,
5+
"author": "richardevcom <[email protected]> (https://richardev.com)",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "run-p type-check build-only",
9+
"preview": "vite preview",
10+
"build-only": "vite build",
11+
"type-check": "vue-tsc --noEmit",
12+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
13+
},
14+
"dependencies": {
15+
"pinia": "^2.0.28",
16+
"vue": "^3.2.45",
17+
"vue-router": "^4.1.6"
18+
},
19+
"devDependencies": {
20+
"@rushstack/eslint-patch": "^1.1.4",
21+
"@types/node": "^18.11.12",
22+
"@vitejs/plugin-vue": "^4.0.0",
23+
"@vue/eslint-config-prettier": "^7.0.0",
24+
"@vue/eslint-config-typescript": "^11.0.0",
25+
"@vue/tsconfig": "^0.1.3",
26+
"autoprefixer": "^10.4.13",
27+
"eslint": "^8.22.0",
28+
"eslint-plugin-vue": "^9.3.0",
29+
"npm-run-all": "^4.1.5",
30+
"postcss": "^8.4.21",
31+
"prettier": "^2.7.1",
32+
"sass": "^1.58.1",
33+
"tailwindcss": "^3.2.6",
34+
"typescript": "~4.7.4",
35+
"vite": "^4.0.0",
36+
"vue-tsc": "^1.0.12"
37+
}
38+
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎src/App.vue

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script setup lang="ts">
2+
import { RouterLink, RouterView } from "vue-router";
3+
import HelloWorld from "./components/HelloWorld.vue";
4+
import LogoSVG from "./components/svg/LogoSVG.vue";
5+
</script>
6+
7+
<template>
8+
<header class="lg:flex place-items-center max-h-screen pr-20 leading-8">
9+
<LogoSVG alt="Vue logo" class="lg:m-0 lg:mr-8 block mx-auto mt-0" />
10+
11+
<div class="lg:flex lg:place-items-start lg:flex-wrap">
12+
<HelloWorld msg="You did it!" />
13+
14+
<nav
15+
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"
16+
>
17+
<RouterLink
18+
class="first-of-type:border-0 inline-block px-4 py-0 border border-l border-gray-600"
19+
to="/"
20+
>Home</RouterLink
21+
>
22+
<RouterLink
23+
class="first-of-type:border-0 inline-block px-4 py-0 border border-l border-gray-600"
24+
to="/about"
25+
>About</RouterLink
26+
>
27+
</nav>
28+
</div>
29+
</header>
30+
31+
<RouterView />
32+
</template>
33+
34+
<style scoped lang="scss">
35+
nav a {
36+
&.router-link-exact-active {
37+
@apply text-gray-800 dark:text-white;
38+
39+
&:hover {
40+
@apply bg-transparent;
41+
}
42+
}
43+
}
44+
</style>

‎src/assets/base.scss

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
*,
7+
*::before,
8+
*::after {
9+
@apply box-border m-0 relative font-normal;
10+
}
11+
12+
body {
13+
@apply min-h-screen text-gray-800 bg-white transition-colors duration-500 leading-6 font-sans text-base antialiased;
14+
@apply xl:flex xl:place-items-center;
15+
@apply dark:text-gray-400 dark:bg-gray-900;
16+
text-rendering: optimizeLegibility;
17+
}
18+
19+
#app {
20+
@apply max-w-7xl p-8 mx-auto my-0 font-normal;
21+
@apply xl:grid xl:grid-cols-2 xl:gap-x-8 xl:py-0 xl:px-8;
22+
}
23+
24+
a {
25+
@apply no-underline text-jade-500 duration-400;
26+
27+
&:hover {
28+
@apply hover-hover:bg-jade-900;
29+
}
30+
}
31+
}

‎src/components/HelloWorld.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
msg: string;
4+
}>();
5+
</script>
6+
7+
<template>
8+
<h1 class="text-4xl font-medium -top-2.5 text-center lg:text-left">
9+
{{ msg }}
10+
</h1>
11+
<h3 class="lg:text-left text-xl text-center">
12+
You’ve successfully created a project with
13+
<a href="https://vitejs.dev/" class="" target="_blank" rel="noopener"
14+
>Vite</a
15+
>
16+
+
17+
<a href="https://vuejs.org/" class="" target="_blank" rel="noopener"
18+
>Vue 3</a
19+
>. What's next?
20+
</h3>
21+
</template>

0 commit comments

Comments
 (0)