├── .eslintrc.cjs
├── .gitignore
├── .prettierrc.json
├── .vscode
└── extensions.json
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
└── favicon.ico
├── src
├── App.vue
├── assets
│ ├── base.css
│ ├── logo.svg
│ └── main.css
├── components
│ ├── HelloWorld.vue
│ ├── TheWelcome.vue
│ ├── WelcomeItem.vue
│ ├── __tests__
│ │ └── HelloWorld.spec.js
│ └── icons
│ │ ├── IconCommunity.vue
│ │ ├── IconDocumentation.vue
│ │ ├── IconEcosystem.vue
│ │ ├── IconSupport.vue
│ │ └── IconTooling.vue
├── main.js
├── router
│ └── index.js
├── stores
│ └── counter.js
└── views
│ ├── AboutView.vue
│ └── HomeView.vue
└── vite.config.js
/.eslintrc.cjs:
--------------------------------------------------------------------------------
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-prettier",
10 | ],
11 | parserOptions: {
12 | ecmaVersion: "latest",
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
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 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Armagan Amcalar
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-starter
2 |
3 | This template should help get you started developing with Vue 3 in Vite.
4 |
5 | ## Recommended IDE Setup
6 |
7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
8 |
9 | ## Customize configuration
10 |
11 | See [Vite Configuration Reference](https://vitejs.dev/config/).
12 |
13 | ## Project Setup
14 |
15 | ```sh
16 | npm install
17 | ```
18 |
19 | ### Compile and Hot-Reload for Development
20 |
21 | ```sh
22 | npm run dev
23 | ```
24 |
25 | ### Compile and Minify for Production
26 |
27 | ```sh
28 | npm run build
29 | ```
30 |
31 | ### Run Unit Tests with [Vitest](https://vitest.dev/)
32 |
33 | ```sh
34 | npm run test:unit
35 | ```
36 |
37 | ### Lint with [ESLint](https://eslint.org/)
38 |
39 | ```sh
40 | npm run lint
41 | ```
42 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-starter",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vite build",
8 | "preview": "vite preview",
9 | "test:unit": "vitest --environment jsdom --root src/",
10 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
11 | },
12 | "dependencies": {
13 | "pinia": "^2.0.26",
14 | "vue": "^3.2.45",
15 | "vue-router": "^4.1.6"
16 | },
17 | "devDependencies": {
18 | "@rushstack/eslint-patch": "^1.1.4",
19 | "@vitejs/plugin-vue": "^3.2.0",
20 | "@vue/eslint-config-prettier": "^7.0.0",
21 | "@vue/test-utils": "^2.2.4",
22 | "eslint": "^8.22.0",
23 | "eslint-plugin-vue": "^9.3.0",
24 | "jsdom": "^20.0.3",
25 | "prettier": "^2.7.1",
26 | "pug": "^3.0.2",
27 | "sass": "^1.56.1",
28 | "vite": "^3.2.4",
29 | "vitest": "^0.25.3"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dashersw/vue-starter/49a3d93ab0623b137a7a0022dd79095b7dc2ac1e/public/favicon.ico
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 | header
16 | img.logo(alt='Vue logo' src='@/assets/logo.svg' width='125' height='125')
17 | .wrapper
18 | hello-world(msg='You did it!')
19 | nav
20 | router-link(to='/') Home
21 | router-link(to='/about') About
22 | router-view
23 |
24 |
25 |
26 |
89 |
--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
1 | /* color palette from */
2 | :root {
3 | --vt-c-white: #ffffff;
4 | --vt-c-white-soft: #f8f8f8;
5 | --vt-c-white-mute: #f2f2f2;
6 |
7 | --vt-c-black: #181818;
8 | --vt-c-black-soft: #222222;
9 | --vt-c-black-mute: #282828;
10 |
11 | --vt-c-indigo: #2c3e50;
12 |
13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 |
18 | --vt-c-text-light-1: var(--vt-c-indigo);
19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 | --vt-c-text-dark-1: var(--vt-c-white);
21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 |
24 | /* semantic color variables for this project */
25 | :root {
26 | --color-background: var(--vt-c-white);
27 | --color-background-soft: var(--vt-c-white-soft);
28 | --color-background-mute: var(--vt-c-white-mute);
29 |
30 | --color-border: var(--vt-c-divider-light-2);
31 | --color-border-hover: var(--vt-c-divider-light-1);
32 |
33 | --color-heading: var(--vt-c-text-light-1);
34 | --color-text: var(--vt-c-text-light-1);
35 |
36 | --section-gap: 160px;
37 | }
38 |
39 | @media (prefers-color-scheme: dark) {
40 | :root {
41 | --color-background: var(--vt-c-black);
42 | --color-background-soft: var(--vt-c-black-soft);
43 | --color-background-mute: var(--vt-c-black-mute);
44 |
45 | --color-border: var(--vt-c-divider-dark-2);
46 | --color-border-hover: var(--vt-c-divider-dark-1);
47 |
48 | --color-heading: var(--vt-c-text-dark-1);
49 | --color-text: var(--vt-c-text-dark-2);
50 | }
51 | }
52 |
53 | *,
54 | *::before,
55 | *::after {
56 | box-sizing: border-box;
57 | margin: 0;
58 | position: relative;
59 | font-weight: normal;
60 | }
61 |
62 | body {
63 | min-height: 100vh;
64 | color: var(--color-text);
65 | background: var(--color-background);
66 | transition: color 0.5s, background-color 0.5s;
67 | line-height: 1.6;
68 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
69 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
70 | font-size: 15px;
71 | text-rendering: optimizeLegibility;
72 | -webkit-font-smoothing: antialiased;
73 | -moz-osx-font-smoothing: grayscale;
74 | }
75 |
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import './base.css';
2 |
3 | #app {
4 | max-width: 1280px;
5 | margin: 0 auto;
6 | padding: 2rem;
7 |
8 | font-weight: normal;
9 | }
10 |
11 | a,
12 | .green {
13 | text-decoration: none;
14 | color: hsla(160, 100%, 37%, 1);
15 | transition: 0.4s;
16 | }
17 |
18 | @media (hover: hover) {
19 | a:hover {
20 | background-color: hsla(160, 100%, 37%, 0.2);
21 | }
22 | }
23 |
24 | @media (min-width: 1024px) {
25 | body {
26 | display: flex;
27 | place-items: center;
28 | }
29 |
30 | #app {
31 | display: grid;
32 | grid-template-columns: 1fr 1fr;
33 | padding: 0 2rem;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 | .greetings
30 | h1.green {{ msg }}
31 | h3 You’ve successfully created a project with
32 | a(href='https://vitejs.dev/' target='_blank' rel='noopener') Vite
33 | | +
34 | a(href='https://vuejs.org/' target='_blank' rel='noopener') Vue 3
35 | | .
36 | p Now, let’s see what you can do with it.
37 | p {{ count }}
38 | p
39 | button(@click='increment') +
40 | button(@click='decrement') -
41 | button(@click='reset') reset
42 | slot
43 |
44 |
45 |
68 |
--------------------------------------------------------------------------------
/src/components/TheWelcome.vue:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 | welcome-item
23 | template(#icon='')
24 | documentation-icon
25 | template(#heading='') Documentation
26 | | Vue’s
27 | a(href='https://vuejs.org/' target='_blank' rel='noopener') official documentation
28 | | provides you with all information you need to get started.
29 | welcome-item
30 | template(#icon='')
31 | tooling-icon
32 | template(#heading='') Tooling
33 | | This project is served and bundled with
34 | a(href='https://vitejs.dev/guide/features.html' target='_blank' rel='noopener') Vite
35 | | . The recommended IDE setup is
36 | a(href='https://code.visualstudio.com/' target='_blank' rel='noopener') VSCode
37 | | +
38 | a(href='https://github.com/johnsoncodehk/volar' target='_blank' rel='noopener') Volar
39 | | . If you need to test your components and web pages, check out
40 | a(href='https://www.cypress.io/' target='_blank' rel='noopener') Cypress
41 | | and
42 | a(href='https://on.cypress.io/component' target='_blank') Cypress Component Testing
43 | | .
44 | br
45 | | More instructions are available in
46 | code README.md
47 | | .
48 | welcome-item
49 | template(#icon='')
50 | ecosystem-icon
51 | template(#heading='') Ecosystem
52 | | Get official tools and libraries for your project:
53 | a(href='https://pinia.vuejs.org/' target='_blank' rel='noopener') Pinia
54 | | ,
55 | a(href='https://router.vuejs.org/' target='_blank' rel='noopener') Vue Router
56 | | ,
57 | a(href='https://test-utils.vuejs.org/' target='_blank' rel='noopener') Vue Test Utils
58 | | , and
59 | a(href='https://github.com/vuejs/devtools' target='_blank' rel='noopener') Vue Dev Tools
60 | | . If you need more resources, we suggest paying
61 | a(href='https://github.com/vuejs/awesome-vue' target='_blank' rel='noopener') Awesome Vue
62 | | a visit.
63 | welcome-item
64 | template(#icon='')
65 | community-icon
66 | template(#heading='') Community
67 | | Got stuck? Ask your question on
68 | a(href='https://chat.vuejs.org' target='_blank' rel='noopener') Vue Land
69 | | , our official Discord server, or
70 | a(href='https://stackoverflow.com/questions/tagged/vue.js' target='_blank' rel='noopener') StackOverflow
71 | | . You should also subscribe to
72 | a(href='https://news.vuejs.org' target='_blank' rel='noopener') our mailing list
73 | | and follow the official
74 | a(href='https://twitter.com/vuejs' target='_blank' rel='noopener') @vuejs
75 | | twitter account for latest news in the Vue world.
76 | welcome-item
77 | template(#icon='')
78 | support-icon
79 | template(#heading='') Support Vue
80 | | As an independent project, Vue relies on community backing for its
81 | | sustainability. You can help us by
82 | a(href='https://vuejs.org/sponsor/' target='_blank' rel='noopener') becoming a sponsor
83 | | .
84 |
85 |
--------------------------------------------------------------------------------
/src/components/WelcomeItem.vue:
--------------------------------------------------------------------------------
1 |
2 | .item
3 | i
4 | slot(name='icon')
5 | .details
6 | h3
7 | slot(name='heading')
8 | slot
9 |
10 |
11 |
82 |
--------------------------------------------------------------------------------
/src/components/__tests__/HelloWorld.spec.js:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from "vitest";
2 |
3 | import { mount } from "@vue/test-utils";
4 | import HelloWorld from "../HelloWorld.vue";
5 |
6 | describe("HelloWorld", () => {
7 | it("renders properly", () => {
8 | const wrapper = mount(HelloWorld, { props: { msg: "Hello Vitest" } });
9 | expect(wrapper.text()).toContain("Hello Vitest");
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/components/icons/IconCommunity.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/icons/IconDocumentation.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/icons/IconEcosystem.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/icons/IconSupport.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/icons/IconTooling.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import { createPinia } from "pinia";
3 |
4 | import App from "./App.vue";
5 | import router from "./router";
6 |
7 | import "./assets/main.css";
8 |
9 | const app = createApp(App);
10 |
11 | app.use(createPinia());
12 | app.use(router);
13 |
14 | app.mount("#app");
15 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHistory } from "vue-router";
2 | import HomeView from "../views/HomeView.vue";
3 |
4 | const router = createRouter({
5 | history: createWebHistory(import.meta.env.BASE_URL),
6 | routes: [
7 | {
8 | path: "/",
9 | name: "home",
10 | component: HomeView,
11 | },
12 | {
13 | path: "/about",
14 | name: "about",
15 | // route level code-splitting
16 | // this generates a separate chunk (About.[hash].js) for this route
17 | // which is lazy-loaded when the route is visited.
18 | component: () => import("../views/AboutView.vue"),
19 | },
20 | ],
21 | });
22 |
23 | export default router;
24 |
--------------------------------------------------------------------------------
/src/stores/counter.js:
--------------------------------------------------------------------------------
1 | import { defineStore } from "pinia";
2 |
3 | export const useCounterStore = defineStore("counter", {
4 | state: () => ({
5 | count: 0,
6 | }),
7 | getters: {
8 | doubleCount: (state) => state.count * 2,
9 | },
10 | actions: {
11 | increment() {
12 | this.count++;
13 | },
14 | },
15 | });
16 |
--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 | .about
17 | h1 This is an about page
18 | p {{ count }}
19 | p {{ doubleCount }}
20 | button(@click='increment') +
21 |
22 |
23 |
32 |
--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | main
13 | TheWelcome
14 |
15 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from "node:url";
2 |
3 | import { defineConfig } from "vite";
4 | import vue from "@vitejs/plugin-vue";
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | plugins: [vue()],
9 | resolve: {
10 | alias: {
11 | "@": fileURLToPath(new URL("./src", import.meta.url)),
12 | },
13 | },
14 | });
15 |
--------------------------------------------------------------------------------