Added more sections to the demo

src/App.vue

@@ -1,22 +1,8 @@
 <template>
-  <div id="app" class="pt-15 flex flex-col items-center">
+  <div id="app" class="pt-15 flex flex-col items-center dark:bg-gray-800">
-    <img alt="Vue logo" src="@/assets/logo.svg" width="200" />
+    <HeroSection />
-    <MyComponent />
+    <FeatureSection />
-    <p class="mt-8">
+    <EnvSection />
-      {{ timestamp }}
+    <CompositionSection />
-    </p>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue-demi";
-import { useTimestamp } from "@vueuse/core";
-
-export default defineComponent({
-  name: "App",
-  setup: () => {
-    const { timestamp } = useTimestamp();
-    return { timestamp };
-  },
-});
-</script>

src/components/CompositionSection.vue

@@ -0,0 +1,24 @@
+<template>
+  <section
+    class="flex flex-col items-center text-gray-600 body-font container px-5 py-12 mx-auto"
+  >
+    <Heading2> Composition API </Heading2>
+    <p class="mt-8 dark:text-gray-400">
+      Switch to the dark side
+      <ButtonPrimary class="ml-4" @click.native="toggle">Toggle</ButtonPrimary>
+    </p>
+  </section>
+</template>
+
+<script lang="ts">
+import { useDark, useToggle } from "@vueuse/core";
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+  name: "CompositionSection",
+  setup: () => {
+    const toggle = useToggle(useDark());
+    return { toggle };
+  },
+});
+</script>

src/components/EnvSection.vue

@@ -0,0 +1,42 @@
+<template>
+  <section
+    class="flex flex-col items-center text-gray-600body-font container px-5 py-12 mx-auto"
+  >
+    <Heading2> Environment Variables </Heading2>
+    <p class="dark:text-gray-400">
+      To learn more about env variablels in Vite click
+      <a
+        class="text-purple-500"
+        target="_blank"
+        href="https://vitejs.dev/guide/env-and-mode.html"
+        >here</a
+      >
+    </p>
+    <div class="flex flex-row items-center mt-8">
+      <select
+        v-model="selectedKey"
+        class="bg-purple-500 text-white rounded-lg p-2 focus:outline-none"
+      >
+        <option v-for="key in Object.keys(env)" :key="key" :value="key">
+          {{ key }}
+        </option>
+      </select>
+      <p class="ml-8 dark:text-white">
+        {{ env[selectedKey] }}
+      </p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from "vue-demi";
+
+export default defineComponent({
+  name: "EnvComponent",
+  setup: () => {
+    const env = import.meta.env;
+    const selectedKey = ref(Object.keys(env)[0] || "");
+    return { env, selectedKey };
+  },
+});
+</script>

src/components/FeatureSection.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="text-gray-600 body-font container px-5 py-12 mx-auto">
+    <div class="flex flex-col text-center w-full mb-8">
+      <Heading2> Installed Vite plugins </Heading2>
+    </div>
+    <div class="flex flex-wrap -m-4">
+      <div class="pr-4 py-4 md:w-1/3">
+        <Feature
+          title="vite-plugin-vue2"
+          text="Vue 2 support for Vite"
+          url="https://github.com/underfin/vite-plugin-vue2"
+        />
+      </div>
+      <div class="p-4 md:w-1/3">
+        <Feature
+          title="vite-plugin-components"
+          text="On demand components auto importing for Vite"
+          url="https://github.com/antfu/vite-plugin-components"
+        />
+      </div>
+      <div class="pl-4 py-4 md:w-1/3">
+        <Feature
+          title="vite-plugin-windicss"
+          text="Windi CSS for Vit"
+          url="https://github.com/windicss/vite-plugin-windicss"
+        />
+      </div>
+    </div>
+  </section>
+</template>

src/components/HeroSection.vue

@@ -0,0 +1,31 @@
+<template>
+  <section
+    class="text-gray-600 body-fontcontainer mx-auto flex py-12 md:flex-row flex-col items-center"
+  >
+    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <img
+        class="object-cover object-center rounded"
+        alt="Vite logo"
+        src="@/assets/logo.svg"
+      />
+    </div>
+    <div
+      class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center"
+    >
+      <Heading1> Vite - Vue 2 example </Heading1>
+      <p class="mb-8 leading-relaxed dark:text-gray-400">
+        This example project shows how to speed up your Vue 2 application with
+        the next generation frontend tooling Vite.
+      </p>
+      <div class="flex justify-center">
+        <a href="https://vitejs.dev/guide/" target="_blank">
+          <ButtonPrimary> Vite docs </ButtonPrimary>
+        </a>
+
+        <a href="https://vuejs.org/v2/guide/" target="_blank">
+          <ButtonSecondary> Vue docs </ButtonSecondary>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>

src/components/MyComponent.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="flex flex-col items-center">
-    <h1 class="mt-8 mb-4 text-4xl font-bold">Hello Vite!</h1>
-    <p>Welcome to your Vite Vue2 App</p>
-
-    <h2 class="mt-8 mb-4 text-2xl font-semibold">Installed Vite plugins</h2>
-    <ul class="list-disc">
-      <li>
-        <a href="https://github.com/underfin/vite-plugin-vue2" target="_blank">
-          vite-plugin-vue2
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/antfu/vite-plugin-components"
-          target="_blank"
-        >
-          vite-plugin-components
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/windicss/vite-plugin-windicss"
-          target="_blank"
-        >
-          vite-plugin-windicss
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>

src/components/shared/ButtonPrimary.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg"
+  >
+    <slot />
+  </button>
+</template>

src/components/shared/ButtonSecondary.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
+  >
+    <slot />
+  </button>
+</template>

src/components/shared/Feature.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="flex rounded-lg h-full bg-gray-100 p-8 flex-col items dark:bg-gray-700"
+  >
+    <Heading3>
+      {{ title }}
+    </Heading3>
+
+    <div class="flex flex-col flex-grow">
+      <p class="flex-grow leading-relaxed text-base dark:text-gray-400">
+        {{ text }}
+      </p>
+      <a
+        :href="url"
+        target="_blank"
+        class="mt-3 text-indigo-500 inline-flex items-center"
+        >Learn More
+        <svg
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          class="w-4 h-4 ml-2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M5 12h14M12 5l7 7-7 7"></path>
+        </svg>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+  name: "Feature",
+  props: {
+    title: { type: String, required: true },
+    text: { type: String, required: true },
+    url: { type: String, required: true },
+  },
+});
+</script>

src/components/shared/Heading1.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1
+    class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white"
+  >
+    <slot />
+  </h1>
+</template>

src/components/shared/Heading2.vue

@@ -0,0 +1,7 @@
+<template>
+  <h2
+    class="sm:text-3xl text-2xl font-medium title-font text-gray-900 dark:text-white"
+  >
+    <slot />
+  </h2>
+</template>

src/components/shared/Heading3.vue

@@ -0,0 +1,7 @@
+<template>
+  <h3
+    class="sm:text-xl text-lg font-medium title-font text-gray-900 dark:text-white"
+  >
+    <slot />
+  </h3>
+</template>

src/shims-tsx.d.ts

@@ -10,4 +10,8 @@ declare global {
       [elem: string]: any;
     }
   }
+
+  interface ImportMeta {
+    env: Record<any, string>;
+  }
 }

tailwind.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  darkMode: "class", // or 'media'
+  theme: {},
+  variants: {},
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

vite.config.js

@@ -9,6 +9,7 @@ const config = defineConfig({
     alias: {
       "@": `${path.resolve(__dirname, "src")}`,
     },
+    dedupe: ["vue-demi"],
   },
 
   build: {