Skip to content

Commit df90155

Browse files
alexanderopalexanderop
authored
Initial commit
0 parents  commit df90155

34 files changed

+10312
-0
lines changed

‎.github/workflows/deploy.yml

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
# Allow only one concurrent deployment
15+
concurrency:
16+
group: pages
17+
cancel-in-progress: true
18+
19+
jobs:
20+
build:
21+
runs-on: ubuntu-latest
22+
steps:
23+
- name: Checkout
24+
uses: actions/checkout@v4
25+
26+
- name: Setup Node
27+
uses: actions/setup-node@v4
28+
with:
29+
node-version: '20'
30+
cache: npm
31+
32+
- name: Install dependencies
33+
run: npm ci
34+
35+
- name: Build
36+
run: npm run build
37+
38+
- name: Setup Pages
39+
uses: actions/configure-pages@v4
40+
41+
- name: Upload artifact
42+
uses: actions/upload-pages-artifact@v3
43+
with:
44+
path: ./dist
45+
46+
deploy:
47+
environment:
48+
name: github-pages
49+
url: ${{ steps.deployment.outputs.page_url }}
50+
runs-on: ubuntu-latest
51+
needs: build
52+
steps:
53+
- name: Deploy to GitHub Pages
54+
id: deployment
55+
uses: actions/deploy-pages@v4

‎.gitignore

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

‎.vscode/extensions.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"recommendations": [
3+
"Vue.volar",
4+
"vitest.explorer",
5+
"ms-playwright.playwright"
6+
]
7+
}

‎README.md

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
# Vue.js Starter Template
2+
3+
A modern Vue.js starter template with TypeScript, Pinia, Vue Router, TailwindCSS, and comprehensive testing setup. This template provides a robust foundation for building scalable Vue.js applications using the latest best practices.
4+
5+
## Features
6+
7+
- 🚀 [Vue 3.5](https://vuejs.org/) with Composition API
8+
- ⚡️ [Vite 5](https://vitejs.dev/) for fast development and building
9+
- 🎯 [TypeScript 5.6](https://www.typescriptlang.org/) for type safety
10+
- 📦 [Pinia](https://pinia.vuejs.org/) for state management
11+
- 🛣️ [Vue Router](https://router.vuejs.org/) with automatic route generation
12+
- 🎨 [TailwindCSS 3](https://tailwindcss.com/) for utility-first styling
13+
- ✅ Testing Setup:
14+
- [Vitest](https://vitest.dev/) for unit testing
15+
- [Playwright](https://playwright.dev/) for end-to-end testing
16+
- 📝 [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config)
17+
- 🔧 Vue DevTools integration
18+
19+
## Prerequisites
20+
21+
- Node.js (version 20.x or higher recommended)
22+
- npm (comes with Node.js)
23+
24+
## Getting Started
25+
26+
1. Use this template by clicking the "Use this template" button above
27+
2. Clone your new repository:
28+
29+
```bash
30+
git clone https://github.com/your-username/your-repo-name.git
31+
cd your-repo-name
32+
```
33+
34+
3. Install dependencies:
35+
36+
```bash
37+
npm install
38+
```
39+
40+
4. Start the development server:
41+
42+
```bash
43+
npm run dev
44+
```
45+
46+
5. Open your browser and visit `http://localhost:5173`
47+
48+
## Available Scripts
49+
50+
- `npm run dev` - Start development server
51+
- `npm run build` - Build for production
52+
- `npm run preview` - Preview production build
53+
- `npm run lint` - Lint and fix files
54+
- `npm run test:unit` - Run unit tests
55+
- `npm run test:e2e` - Run end-to-end tests
56+
- `npm run type-check` - Check TypeScript types
57+
58+
## Project Structure
59+
60+
```
61+
├── .github/ # GitHub configuration files
62+
├── e2e/ # End-to-end tests
63+
├── public/ # Public static assets
64+
├── src/
65+
│ ├── assets/ # Project assets
66+
│ ├── components/ # Vue components
67+
│ ├── composables/ # Composable functions
68+
│ ├── layouts/ # Layout components
69+
│ ├── pages/ # Route pages
70+
│ ├── stores/ # Pinia stores
71+
│ ├── App.vue # Root component
72+
│ └── main.ts # Application entry point
73+
├── test/ # Test utilities and setup
74+
└── vite.config.ts # Vite configuration
75+
```
76+
77+
## TypeScript Support
78+
79+
This template is fully typed with TypeScript. Configuration files can be found in:
80+
81+
- `tsconfig.json`
82+
- `tsconfig.node.json`
83+
- `tsconfig.app.json`
84+
85+
## Testing
86+
87+
### Unit Tests
88+
89+
Unit tests are powered by Vitest. Run them with:
90+
91+
```bash
92+
npm run test:unit
93+
```
94+
95+
### E2E Tests
96+
97+
End-to-end tests use Playwright. Run them with:
98+
99+
```bash
100+
npm run test:e2e
101+
```
102+
103+
## ESLint Configuration
104+
105+
This template uses [@antfu/eslint-config](https://github.com/antfu/eslint-config) for consistent code style. Customize the rules in `.eslintrc` if needed.
106+
107+
## Customization
108+
109+
### TailwindCSS
110+
111+
Customize your TailwindCSS configuration in `tailwind.config.js`:
112+
113+
```js
114+
/** @type {import('tailwindcss').Config} */
115+
module.exports = {
116+
content: ['./src/**/*.{vue,js,ts}'],
117+
theme: {
118+
extend: {
119+
// Add your customizations here
120+
},
121+
},
122+
plugins: [],
123+
}
124+
```
125+
126+
### Vite Configuration
127+
128+
Modify the Vite configuration in `vite.config.ts` to add plugins or adjust build settings.
129+
130+
## Contributing
131+
132+
1. Fork the repository
133+
2. Create a new branch: `git checkout -b feature/your-feature`
134+
3. Commit your changes: `git commit -m 'Add some feature'`
135+
4. Push to the branch: `git push origin feature/your-feature`
136+
5. Submit a pull request
137+
138+
## License
139+
140+
[MIT](./LICENSE)

‎e2e/tsconfig.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": "@tsconfig/node20/tsconfig.json",
3+
"include": ["./**/*"]
4+
}

‎e2e/vue.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
// See here how to get started:
4+
// https://playwright.dev/docs/intro
5+
test('visits the app root url', async ({ page }) => {
6+
await page.goto('/')
7+
await expect(page.locator('div.greetings > h1')).toHaveText('You did it!')
8+
})

‎env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="vite/client" />
2+
/// <reference types="unplugin-vue-router/client" />

‎eslint.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import antfu from '@antfu/eslint-config'
2+
3+
export default antfu({
4+
formatters: true,
5+
vue: true,
6+
})

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)