├── env.d.ts
├── .vscode
    └── extensions.json
├── tsconfig.json
├── src
    ├── assets
    │   ├── main.css
    │   ├── logo.svg
    │   ├── plus.svg
    │   ├── vite.svg
    │   └── base.css
    ├── main.ts
    ├── views
    │   ├── AboutView.vue
    │   └── HomeView.vue
    ├── router
    │   └── index.ts
    ├── App.vue
    └── components
    │   └── Card.vue
├── tsconfig.node.json
├── tsconfig.app.json
├── index.html
├── .gitignore
├── vite.config.ts
├── package.json
├── public
    └── favicon.ico
└── README.md


/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.node.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.app.json"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | #app {
 4 |   max-width: 1280px;
 5 |   margin: 0 auto;
 6 |   padding: 2rem;
 7 |   font-weight: normal;
 8 |   display: flex;
 9 |   flex-direction: column;
10 |   gap: 2rem;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import './assets/main.css'
 2 | 
 3 | import { createApp } from 'vue'
 4 | import App from './App.vue'
 5 | import router from './router'
 6 | 
 7 | const app = createApp(App)
 8 | 
 9 | app.use(router)
10 | 
11 | app.mount('#app')
12 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
2 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/node18/tsconfig.json",
 3 |   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
 4 |   "compilerOptions": {
 5 |     "composite": true,
 6 |     "module": "ESNext",
 7 |     "types": ["node"]
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>This is an about page</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | @media (min-width: 1024px) {
 9 |   .about {
10 |     min-height: 100vh;
11 |     display: flex;
12 |     align-items: center;
13 |   }
14 | }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "exclude": ["src/**/__tests__/*"],
 5 |   "compilerOptions": {
 6 |     "composite": true,
 7 |     "baseUrl": ".",
 8 |     "paths": {
 9 |       "@/*": ["./src/*"]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 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>
14 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import vueJsx from '@vitejs/plugin-vue-jsx'
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   plugins: [vue(), vueJsx()],
10 |   resolve: {
11 |     alias: {
12 |       '@': fileURLToPath(new URL('./src', import.meta.url))
13 |     }
14 |   },
15 |   base: './',
16 | })
17 | 


--------------------------------------------------------------------------------
/src/assets/plus.svg:
--------------------------------------------------------------------------------
1 | <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M18.8889 11.9276H1.11111C0.503704 11.9276 0 11.4239 0 10.8165C0 10.2091 0.503704 9.70535 1.11111 9.70535H18.8889C19.4963 9.70535 20 10.2091 20 10.8165C20 11.4239 19.4963 11.9276 18.8889 11.9276Z" fill="white"/>
3 | <path d="M10 20.8165C9.39262 20.8165 8.88892 20.3128 8.88892 19.7054V1.92758C8.88892 1.32017 9.39262 0.816467 10 0.816467C10.6074 0.816467 11.1111 1.32017 11.1111 1.92758V19.7054C11.1111 20.3128 10.6074 20.8165 10 20.8165Z" fill="white"/>
4 | </svg>
5 | 
6 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router'
 2 | import HomeView from '../views/HomeView.vue'
 3 | 
 4 | const router = createRouter({
 5 |   history: createWebHashHistory(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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-template",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "run-p type-check build-only",
 8 |     "preview": "vite preview",
 9 |     "build-only": "vite build",
10 |     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^3.3.2",
14 |     "vue-router": "^4.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@tsconfig/node18": "^2.0.1",
18 |     "@types/node": "^18.16.8",
19 |     "@vitejs/plugin-vue": "^4.2.3",
20 |     "@vitejs/plugin-vue-jsx": "^3.0.1",
21 |     "@vue/tsconfig": "^0.4.0",
22 |     "npm-run-all": "^4.1.5",
23 |     "typescript": "~5.0.4",
24 |     "vite": "^4.3.5",
25 |     "vue-tsc": "^1.6.4"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { RouterView } from 'vue-router'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <header>
 7 |     <div class="hero-top">
 8 |       <img src='@/assets/fleekLogo.svg' height="87" />
 9 |       <img src='@/assets/plus.svg' />
10 |       <img src='@/assets/logo.svg' height="57" />
11 |     </div>
12 | 
13 |     <p className='description'>
14 |       This is a template for creating a React site build it with Vite and deploying it on Fleek.
15 |     </p>
16 |   </header>
17 | 
18 |   <RouterView />
19 | </template>
20 | 
21 | <style scoped>
22 | template {
23 |   display: flex;
24 |   flex-direction: column;
25 | }
26 | 
27 | header {
28 |   display: flex;
29 |   align-items: center;
30 |   flex-direction: column;
31 |   gap: 2.5rem;
32 | }
33 | 
34 | .hero-top {
35 |   display: flex;
36 |   align-items: center;
37 |   gap: 50px;
38 |   margin-left: -95px;
39 | }
40 | 
41 | .description {
42 |   font-size: 1.5rem;
43 |   line-height: 2rem;
44 |   text-align: center;
45 |   width: 100%;
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/components/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps<{
 3 |   title: string;
 4 |   body: string;
 5 |   href: string;
 6 | }>()
 7 | 
 8 | function getUrl() {
 9 |   return props.href;
10 | }
11 | </script>
12 | 
13 | <template>
14 |   <li className='card'>
15 |     <a :href="getUrl()">
16 |       <div className='card-top-row'>
17 |         <slot />
18 |         <h2>
19 |           {{ title }}
20 |         </h2>
21 |       </div>
22 |       <p>
23 |         {{ body }}
24 |       </p>
25 |     </a>
26 |   </li>
27 | </template>
28 | 
29 | <style scoped>
30 | .card {
31 |   list-style: none;
32 | }
33 | 
34 | .card>a {
35 |   color: white;
36 |   box-sizing: border-box;
37 |   height: 100%;
38 |   display: flex;
39 |   flex-direction: column;
40 |   text-decoration: none;
41 |   border-radius: 1.5rem;
42 |   border: 0.85px solid #313538;
43 |   gap: 15px;
44 |   padding: 2rem 1.25rem;
45 | }
46 | 
47 | .card-top-row {
48 |   gap: 15px;
49 |   display: flex;
50 |   align-items: start;
51 | }
52 | 
53 | .card h2 {
54 |   font-size: 1.25rem;
55 |   line-height: 2rem;
56 |   font-weight: 700;
57 |   margin: 0;
58 |   color: white;
59 | }
60 | 
61 | .card p {
62 |   text-align: start;
63 |   font-size: 16px;
64 |   line-height: 1.5rem;
65 |   color: #9ca3af;
66 |   margin: 0;
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/assets/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Card from '../components/Card.vue'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <main>
 7 |     <ul role="list" className='card-list'>
 8 |       <Card href="https://docs.fleek.xyz/" title="Fleek Documentation"
 9 |         body="Learn about Fleek & the available services by cheking our official docs.">
10 |         <img height="31" width="31" src="@/assets/fleekMark.svg" />
11 |       </Card>
12 | 
13 |       <Card href="https://vuejs.org/guide/introduction.html" title="Vue Documentation" body="Learn about Vue in their official docs.">
14 |         <img height="31" width="31" src="@/assets/logo.svg" />
15 |       </Card>
16 | 
17 |       <Card href="https://blog.fleek.xyz/" title="Fleek Blog" body="Checkout our Blog for more information about Fleek.">
18 |         <img height="31" width="31" src="@/assets/fleekMark.svg" />
19 |       </Card>
20 | 
21 |       <Card href="https://vitejs.dev/guide/" title="Vite Documentation"
22 |         body="Learn about Vite & how it can bring you a modern development experience.">
23 |         <img height="31" width="31" src="@/assets/vite.svg" />
24 |       </Card>
25 |     </ul>
26 |   </main>
27 | </template>
28 | 
29 | <style scoped>
30 | .card-list {
31 |   display: grid;
32 |   grid-template-columns: repeat(2, minmax(0, 1fr));
33 |   gap: 15px;
34 | }
35 | 
36 | main {
37 |   width: 75%;
38 |   display: flex;
39 |   flex-direction: column;
40 |   align-items: center;
41 |   margin: 0 auto;
42 |   gap: 2.5rem;
43 | }
44 | 
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 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 |   font-weight: normal;
59 | }
60 | 
61 | body {
62 |   min-height: 100vh;
63 |   color: var(--color-text);
64 |   background: var(--color-background);
65 |   transition: color 0.5s, background-color 0.5s;
66 |   line-height: 1.6;
67 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
68 |     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
69 |   font-size: 15px;
70 |   text-rendering: optimizeLegibility;
71 |   -webkit-font-smoothing: antialiased;
72 |   -moz-osx-font-smoothing: grayscale;
73 | }
74 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
1 | 

  
 �( @
 ��A��A��A��A��A��A��A3��A3��A��A��A��A��A���A���A��A��A��A��AZ��A���A���AZ��A��A��A��A��AɃ�A���A���AɃ�A��A��A��A��Az��A���A���A���A���Az��A��A��A��A��A.��A߃�A���A���A���A���A߃�A.��A��A��A��A��A���A���A���A���A���A���A���A���A��A��A��A��AH��A���A���A���A���A���A���A���A���AH��A��A��A��A��A���A���A���A���A���A���A���A���A���A���A��A��A��A��Af��A���A���A���A���A���A���A���A���A���A���Af��A��A��A��A ��A҃�A���A���A���A���A���A���A���A���A���A���A҃�A ��A��A��A
��A���A���A���A���A���A�|�?�|�?���A���A���A���A���A���A���A
��A��A��A��A7��A惸A���A���A���A���A�jl9�jl9���A���A���A���A���A���A惸A7��A��A��A��A	��A���A���A���A���A���A�w�=�_L5�_L5�w�=���A���A���A���A���A���A���A	��A��A��A��AR��A���A���A���A���A���@�fa8�^H5�^H5�fa8���@���A���A���A���A���A���AR��A��A��A��A��Aƒ�A���A���A���A���A�r�<�^I5�^I5�^I5�^I5�r�<���A���A���A���A���A���Aƒ�A��A��A��A��Aq��A���A���A���A���A�}�?�cW7�^H5�^I5�^I5�^H5�cW7�}�?���A���A���A���A���A���Aq��A��A��A��A(��Aڃ�A���A���A���A���A�mv:�^H5�^I5�^I5�^I5�^I5�^H5�mv:���A���A���A���A���A���Aڃ�A(��A��A��A��A���A���A���A���A���A�y�>�`P6�^H5�^I5�^I5�^I5�^I5�^H5�`P6�y�>���A���A���A���A���A���A���A��A��A��A��A@��A샸A���A���A���A���@�ii9�]G5�^I5�^I5�^I5�^I5�^I5�^I5�]G5�ii9���@���A���A���A���A���A샸A@��A��A��A��A
��A���A���A���A���A���A�u�=�_K5�^I5�^I5�^I5�^I5�^I5�^I5�^I5�^I5�_K5�u�=���A���A���A���A���A���A���A
��A��A��A��A]��A���A���A���A���A��@�e]7�^H5�^I5�^I5�^I5�^J5�^J5�^I5�^I5�^I5�^H5�e]7��@���A���A���A���A���A���A]��A��A��A��A��Ã�A���A���A���A���A�p;�^I5�^I5�^I5�^I5�^I5�_L5n_L5n^I5�^I5�^I5�^I5�^I5�p;���A���A���A���A���A���Ã�A��A��A��A��A}��A���A���A���A���A�|�?�bT6�^H5�^I5�^I5�^I5�_J5�aP6aP6_J5�^I5�^I5�^I5�^H5�bT6�|�?���A���A���A���A���A���A}��A��A��A��A/��AჸA���A���A���A���A�lq9�^H5�^I5�^I5�^I5�^I5�_L5P^H5^H5_L5P^I5�^I5�^I5�^I5�^H5�lq9���A���A���A���A���A���AჸA/��A��A��A���A���A���A���A���A�x�=�`N6�^I5�^I5�^I5�^I5�_K5�bT7aQ6aQ6bT7_K5�^I5�^I5�^I5�^I5�`N6�x�=���A���A���A���A���A���A���A��AW��A���A���A���A���A���@�gd8�^H5�^I5�^I5�^I5�^J5�`M65_K5jf9jf9_K5`M65^J5�^I5�^I5�^I5�^H5�gd8���@���A���A���A���A���A���AW��A���Aȃ�Aƃ�Aƃ�AƄ�A�v�=�_K5�^I5�^I5�^I5�^I5�_K5uha9bS7bS7ha9_K5u^I5�^I5�^I5�^I5�_K5�v�=Ƅ�Aƃ�Aƃ�Aƃ�Aƃ�Aȃ�A���A��A
��A
��A
��A
��A
lr:
\D4
^I5
^I5
^I5
^I5
`M6^H5^H5`M6^I5
^I5
^I5
^I5
\D4
lr9
��A
��A
��A
��A
��A
��A�������������?���?������������������������
��������?�?��������
�

��������


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue + Fleek Starter Kit
  2 | 
  3 | ![image](https://github.com/fleekxyz/vue-template/assets/55561695/aae35d6b-7c60-4e55-a6dc-987cb24df978)
  4 | 
  5 | ## 🚀 Project Structure
  6 | 
  7 | Inside of your Vue project, you'll see the following folders and files:
  8 | 
  9 | ```
 10 | /
 11 | ├── public/
 12 | │   └── favicon.svg
 13 | ├── src/
 14 | │   ├── assets/
 15 | │   ├── components/
 16 | │   ├── router/
 17 | │   ├── views/
 18 | │   ├── App.vue
 19 | │   └── main.ts
 20 | ├── index.html
 21 | ├── env.d.ts
 22 | ├── tsconfig.json
 23 | ├── vite.config.ts
 24 | └── package.json
 25 | ```
 26 | 
 27 | If you want to lern more about `vue` you can checkout the official [Vue Documentation](https://vuejs.org/guide/introduction.html).
 28 | 
 29 | 
 30 | ## 🧞 Commands
 31 | 
 32 | All commands are run from the root of the project, from a terminal:
 33 | 
 34 | | Command                | Action                                           |
 35 | | :--------------------- | :----------------------------------------------- |
 36 | | `pnpm install`          | Installs dependencies                            |
 37 | | `pnpm run dev`          | Starts local dev server at `localhost:5173`      |
 38 | | `pnpm run build`        | Build your production site to `./dist/`          |
 39 | | `pnpm run preview`      | Preview your build locally, before deploying     |
 40 | | `pnpm run build-only`      | Build your production site without running typechecks     |
 41 | | `pnpm run type-check` | Run the typecheck |
 42 | 
 43 | ## ⚡ How to deploy to Fleek
 44 | 
 45 | ### 1. Create a `fleek.json` config file:
 46 | You can configure this site deployment using [Fleek CLI]() and running:
 47 | ```
 48 |  > fleek sites init
 49 |    WARN! Fleek CLI is in beta phase, use it under your own responsibility
 50 |    ? Choose one of the existing sites or create a new one. › 
 51 |    ❯ Create a new site
 52 | ```
 53 | It will prompt you for a `name`, `dist` directory location & `build command`
 54 | - `name`: How you want to name the site
 55 | - `dist`: The output directory where the site is located, for this template it's `dist`
 56 | - `build command`: Command to build your site, this will be used to deploy the latest version either by CLI or Github Actions
 57 | 
 58 | ### 2. Deploy the site
 59 | After configuiring your `fleek.json` file, you can deployt the site by running
 60 | 
 61 | ```
 62 | fleek sites deploy
 63 | ```
 64 | After running it you will get an output like this:
 65 | ```
 66 |  WARN! Fleek CLI is in beta, use it at your own discretion
 67 |  > Success! Deployed!
 68 |  > Site IPFS CID: Qmbv2NT91iPkXaoim5CSwdR8MLEoquRPcsdZncZ5QaxAqn
 69 | 
 70 |  > You can visit through the gateway:
 71 |  > https://ipfs.io/ipfs/Qmbv2NT91iPkXaoim5CSwdR8MLEoquRPcsdZncZ5QaxAqn
 72 |  ```
 73 | 
 74 | ### Extra features
 75 | - **Continuous Integration (CI):** `fleek sites ci` [Documentation.](https://docs.fleek.xyz/services/sites/#continuous-integration-ci)
 76 | - **Adding custom domains:** `fleek domains create` [Documentation.](https://docs.fleek.xyz/services/domains/)
 77 | 
 78 | 
 79 | ### Keep in mind:
 80 | 
 81 | This template has been configured to produce a static output.
 82 | 
 83 | ```js
 84 | // vite.config.ts
 85 | 
 86 | import { fileURLToPath, URL } from 'node:url'
 87 | 
 88 | import { defineConfig } from 'vite'
 89 | import vue from '@vitejs/plugin-vue'
 90 | import vueJsx from '@vitejs/plugin-vue-jsx'
 91 | 
 92 | // https://vitejs.dev/config/
 93 | export default defineConfig({
 94 |   plugins: [vue(), vueJsx()],
 95 |   resolve: {
 96 |     alias: {
 97 |       '@': fileURLToPath(new URL('./src', import.meta.url))
 98 |     }
 99 |   },
100 |   base: './',
101 | })
102 | ```
103 | 
104 | This means that assets will be pre-fixed with `./`, you can learn more about it in [Vite Documentation](https://vitejs.dev/config/shared-options.html#base)
105 | 
106 | To avoid routing issues when we deploy our site to IPFS, we'll use `Hash routing`
107 | ```js
108 | import { createRouter, createWebHashHistory } from 'vue-router'
109 | import HomeView from '../views/HomeView.vue'
110 | 
111 | const router = createRouter({
112 |   history: createWebHashHistory(import.meta.env.BASE_URL),
113 |   routes: [
114 |     {
115 |       path: '/',
116 |       name: 'home',
117 |       component: HomeView
118 |     },
119 |     {
120 |       path: '/about',
121 |       name: 'about',
122 |       // route level code-splitting
123 |       // this generates a separate chunk (About.[hash].js) for this route
124 |       // which is lazy-loaded when the route is visited.
125 |       component: () => import('../views/AboutView.vue')
126 |     }
127 |   ]
128 | })
129 | 
130 | export default router
131 | ```
132 | 
133 | 
134 | 
135 | ## 👀 Want to learn more?
136 | 
137 | Feel free to check [Fleek Documentation](https://docs.fleek.xyz/) & [Vue Documentation](https://vuejs.org/guide/introduction.html).
138 | 


--------------------------------------------------------------------------------