Merge pull request #5 from lstoeferle/feat/live-demo

feat: live demo

README.md

@@ -1,15 +1,24 @@
-# Vite ⚡ - Vue 2 starter template
+<h1 align="center">Vite ⚡ - Vue 2 starter template</h1>
 
-This starter template will help you to easily create a Vue2 application bundled by the lightning fast build tool called [Vite](https://github.com/vitejs/vite). Besides Vite this template also provides:
+<p align="center">
+  Create a Vue 2 application bundled by the lightning fast build tool <a href="https://github.com/vitejs/vite">Vite</a>
+</p>
 
+<p align="center">
+ <a href="https://vite-vue2-starter.netlify.app"> ✨ Live Demo</a>
+</p>
 
-* Typescript support
+# 🔥 Features
-* Vue Router
-* Vue Composition-API
-* VueUse
-* WindiCSS (TailwindCSS) + Dark Mode
 
-## :package: Vite plugins
+* ⚡️ [Vite 2](https://github.com/vitejs/vite), [Vue 2](https://github.com/vuejs/vue) and [Composition-API](https://github.com/vuejs/composition-api)
+* 🚦 [Vue-Router](https://github.com/vuejs/vue-router)
+* 📦 [Components auto importing](https://github.com/antfu/vite-plugin-components)
+* 🎨 [Windi CSS](https://github.com/windicss/vite-plugin-windicss) - on-demand Tailwind CSS with speed and dark mode
+* 😃 [Icons as Vue components](https://github.com/antfu/vite-plugin-icons) - powered by [Iconify](https://github.com/iconify/iconify)
+* 🧰 [VueUse](https://github.com/vueuse/vueuse) - collection of essential Vue Composition Utilities 
+* 🔍 ESLint + Prettier 
+* 🦾 Typescript
+# 📦 Vite plugins
 
 * [`vite-plugin-vue2`](https://github.com/underfin/vite-plugin-vue2) -
   Vue 2 support for Vite
@@ -17,20 +26,53 @@ This starter template will help you to easily create a Vue2 application bundled
   On demand components auto importing for Vite
 * [`vite-plugin-windicss`](https://github.com/windicss/vite-plugin-windicss) -
   WindiCSS/TailwindCSS for Vite
-* [`vite-plugin-icoms`](https://github.com/antfu/vite-plugin-icons) -  
+* [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) -
   Access thousands of icons as Vue components in Vite 
 
-## :rocket: Getting started
+# 🚀 Getting started
 
-1.  Install dependencies  
+## GitHub Template
-    ```bash
-    npm install
-    ```
-2.  Start dev server
-    ```bash
-    npm run dev
-    ```
-3.  Visit the page  
-    <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>
 
-    
+[Create a repo from this template on GitHub](https://github.com/lstoeferle/vite-vue2-windicss-starter/generate)
+
+When you use this template, try follow the checklist to update your info properly
+
+- [ ] Rename `name` field in `package.json`
+- [ ] Change the author name in `LICENSE`
+- [ ] Change the app name in `.env`
+- [ ] Change the favicon in `public`
+- [ ] Clean up the README(s) and remove routes
+
+## Clone 
+
+If you prefer to do it manually with a cleaner git history
+
+```bash
+npx degit lstoeferle/vite-vue2-windicss-starter my-vite-vue2-app
+cd my-vite-vue2-app
+npm i
+```
+
+# Usage
+
+## Development
+
+Just run and visit [http://localhost:8080](http://localhost:8080)
+
+```bash
+npm run dev
+```
+
+## Build 
+
+To build the App, run
+
+```bash
+npm run build
+```
+
+And you will see the generated files in `dist`, which are ready to be served.
+
+# Why
+
+Vue 3 is awesome, but we should not forget about supporting Vue 2 ♥️

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "vite-vue2-example",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
@@ -18,6 +17,7 @@
         "vue-router": "3.5.1"
       },
       "devDependencies": {
+        "@iconify/json": "1.1.310",
         "@typescript-eslint/eslint-plugin": "4.15.2",
         "@typescript-eslint/parser": "4.15.2",
         "@vue/eslint-config-prettier": "6.0.0",
@@ -458,11 +458,10 @@
       }
     },
     "node_modules/@iconify/json": {
-      "version": "1.1.309",
+      "version": "1.1.310",
-      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.309.tgz",
+      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.310.tgz",
-      "integrity": "sha512-L9556ireR0vOEcrIc54AJpwhts+T4YKArkB5NkxQCMk5b4Rc9+DviglggXByaR2ryqyRZT1/cv1AD/xJtQBQ6g==",
+      "integrity": "sha512-gLCuqulJPC2ly3upqPILOA1nV2fYfb99Dx64hLvneUb0r22opL+TfMfl352AjSZTFMGKV6ve8pNSAOS5gvY3vg==",
-      "dev": true,
+      "dev": true
-      "peer": true
     },
     "node_modules/@iconify/json-tools": {
       "version": "1.0.10",
@@ -5344,11 +5343,10 @@
       }
     },
     "@iconify/json": {
-      "version": "1.1.309",
+      "version": "1.1.310",
-      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.309.tgz",
+      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-1.1.310.tgz",
-      "integrity": "sha512-L9556ireR0vOEcrIc54AJpwhts+T4YKArkB5NkxQCMk5b4Rc9+DviglggXByaR2ryqyRZT1/cv1AD/xJtQBQ6g==",
+      "integrity": "sha512-gLCuqulJPC2ly3upqPILOA1nV2fYfb99Dx64hLvneUb0r22opL+TfMfl352AjSZTFMGKV6ve8pNSAOS5gvY3vg==",
-      "dev": true,
+      "dev": true
-      "peer": true
     },
     "@iconify/json-tools": {
       "version": "1.0.10",

package.json

@@ -19,6 +19,7 @@
     "vue-router": "3.5.1"
   },
   "devDependencies": {
+    "@iconify/json": "1.1.310",
     "@typescript-eslint/eslint-plugin": "4.15.2",
     "@typescript-eslint/parser": "4.15.2",
     "@vue/eslint-config-prettier": "6.0.0",

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <Navbar />
     <main id="app">
-      <router-view />
+      <RouterView />
     </main>
   </div>
 </template>

src/components/Feature.vue

@@ -16,7 +16,7 @@
         class="inline-flex items-center mt-3 text-green-500"
       >
         Learn More
-        <mdi-arrow-right class="ml-1" />
+        <MdiArrowRight class="ml-1" />
       </a>
     </div>
   </div>

src/components/Hero.vue

@@ -22,9 +22,9 @@
           <ButtonPrimary> Vue docs </ButtonPrimary>
         </a>
 
-        <router-link :to="{ name: 'About' }">
+        <RouterLink :to="{ name: 'About' }">
           <ButtonSecondary> About </ButtonSecondary>
-        </router-link>
+        </RouterLink>
       </div>
     </div>
   </section>

src/components/Navbar.vue

@@ -3,7 +3,7 @@
     <div
       class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row"
     >
-      <router-link
+      <RouterLink
         :to="{ name: 'Home' }"
         class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0"
       >
@@ -11,11 +11,11 @@
         <span class="ml-3 text-xl dark:text-white">
           {{ appName }}
         </span>
-      </router-link>
+      </RouterLink>
       <nav
         class="flex flex-wrap items-center justify-center text-base md:ml-auto"
       >
-        <router-link
+        <RouterLink
           v-for="(route, index) in routes"
           :key="index"
           class="mr-5 font-semibold cursor-pointer"
@@ -28,29 +28,28 @@
           :to="{ name: route.name }"
         >
           {{ route.name }}
-        </router-link>
+        </RouterLink>
-        <router-link
+        <RouterLink
           class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
           to="/aliens"
         >
-          <mdi-alien />
+          <MdiAlien />
-        </router-link>
+        </RouterLink>
         <a
           href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
           target="_blank"
           class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
         >
-          <mdi-github />
+          <MdiGithub />
         </a>
         <button
           @click="toggle"
           class="flex items-center justify-center w-9 h-9 focus:outline-none"
         >
-          <mdi-white-balance-sunny class="text-yellow-500" v-if="isDark" />
+          <MdiWhiteBalanceSunny class="text-yellow-500" v-if="isDark" />
-          <mdi-moon-waning-crescent class="text-gray-800" v-else />
+          <MdiMoonWaningCrescent class="text-gray-800" v-else />
         </button>
       </nav>
-      <div></div>
     </div>
   </header>
 </template>

src/views/NotFound.vue

@@ -16,9 +16,9 @@
           Oops, looks like you got kidnapped by aliens.
         </p>
         <div class="flex justify-center">
-          <router-link :to="{ name: 'Home' }">
+          <RouterLink :to="{ name: 'Home' }">
             <ButtonPrimary> Bring me back Home </ButtonPrimary>
-          </router-link>
+          </RouterLink>
         </div>
       </div>
     </div>