init

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+debug.log
+.idea

LICENSE

@@ -0,0 +1,13 @@
+MUKTI
+license Mukti/Moksh - 'the liberation' is a basic realization that the result of distribution or giving away does not always come short, specially when things are non physical. MUKTI is not a license but a step towards a license free civilization.
+Human race is better with 'some sense' rather a bunch of license. [have some sense, not licenses.]
+
+till all the licenses are deprecated and decentralize [ specially for software, hardware, education, experience,even the network protocol (internet) ], lets use freedom centric and/or having "take if it helps you, just don't sue us - kind of mentality" licenses like GPL, MIT, BSD ...
+
+this will not be registered / certified / legalise in any manner, as it's not about enforcement - it is about freedom to share.
+
+example of 'some sense':
+    verbose incremental documentation with versioning, attaching contributor information.
+    try to make some OFFERING to the contributor or the contributing organization with or without a subscription / support.
+    maximize the use of freedom centric tools[hardware, software, os ...] enen if it costs and costs more, try not to be the product.
+    

README.md

@@ -0,0 +1,10 @@
+
+### Getting Started
+
+
+```sh
+npm i
+npm run dev
+npm run build
+npm run serve
+```

auto-imports.d.ts

@@ -0,0 +1,60 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineLoader: typeof import('vue-router/auto')['defineLoader']
+  const definePage: typeof import('vue-router/auto')['definePage']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useHead: typeof import('@vueuse/head')['useHead']
+  const useRoute: typeof import('vue-router/auto')['useRoute']
+  const useRouter: typeof import('vue-router/auto')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}

components.d.ts

@@ -0,0 +1,14 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    ButtonRepo: typeof import('./src/components/ButtonRepo.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite, Vue3, Tailwind CSS</title>
+    <link
+      rel="preload"
+      href="/font/Inter-roman.var.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <!-- <link rel="preload" href="/font/Inter-italic.var.woff2" as="font" type="font/woff2" crossorigin="anonymous"> -->
+    <link rel="stylesheet" href="/font/inter.css" />
+  </head>
+  <body>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "vite-vue3-tailwind-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@vueuse/head": "^0.7.9",
+    "vue": "^3.2.38",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@headlessui/vue": "^1.6.7",
+    "@heroicons/vue": "^2.0.10",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.4.2",
+    "@tailwindcss/typography": "^0.5.7",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.8",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "tailwindcss": "^3.1.8",
+    "typescript": "^4.8.2",
+    "unplugin-auto-import": "^0.11.2",
+    "unplugin-vue-components": "^0.22.4",
+    "unplugin-vue-router": "^0.2.1",
+    "vite": "^3.1.0",
+    "vue-tsc": "^0.40.7"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/DWD-Logo.svg

@@ -0,0 +1,11 @@
+<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+ <!-- DWD Consultancy Services LOGO:: https://dwd.siliconpin.com -->
+ <g>
+  <rect fill="#ff7f00" id="canvas_background" height="400" width="400" y="0" x="0"/>
+ </g>
+ <g>
+  <ellipse ry="170" rx="170" cy="200" cx="200" fill="red" id="logo_red" />
+  <ellipse ry="130" rx="130" cy="200" cx="200" fill="green" id="logo_green" />
+  <ellipse ry="100" rx="100" cy="200" cx="200" fill="blue" id="logo_blue" />
+ </g>
+</svg>

public/font/inter.css

@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('Inter-roman.var.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('Inter-italic.var.woff2') format('woff2');
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

src/App.vue

@@ -0,0 +1,26 @@
+<script setup>
+let counter = ref(0)
+
+setInterval(() => {
+  counter.value++
+}, 1000)
+</script>
+
+<template>
+  <div>
+    <header class="bg-white shadow" v-if="$route.meta.title">
+      <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        <h1
+          @click="counter = 0"
+          class="text-3xl font-bold leading-tight text-gray-900"
+          title="click to reset a counter"
+        >
+          {{ $route.meta.title }} / {{ counter }}
+        </h1>
+      </div>
+    </header>
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>

src/components/ButtonRepo.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="ml-3 inline-flex rounded-md shadow">
+    <a
+      target="_blank"
+      href="https://github.com/web2033/vite-vue3-tailwind-starter"
+      class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium leading-6 text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-500 focus:outline-none"
+      >Learn more</a
+    >
+  </div>
+</template>

src/main.ts

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import './tailwind.css'
+import App from './App.vue'
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { createHead } from '@vueuse/head'
+
+const app = createApp(App)
+const head = createHead()
+
+const router = createRouter({
+  history: createWebHistory(),
+})
+
+app.use(router)
+app.use(head)
+app.mount(document.body)

src/pages/[...404].vue

@@ -0,0 +1,13 @@
+<script setup>
+useHead({
+  title: '404',
+})
+</script>
+
+<template>
+  <header class="bg-white shadow">
+    <div class="mx-auto max-w-7xl py-6 px-4 sm:px-6 lg:px-8">
+      <h1 class="text-3xl font-bold leading-tight text-gray-900">Not Found</h1>
+    </div>
+  </header>
+</template>

src/pages/about.vue

@@ -0,0 +1,39 @@
+<route lang="json">
+{
+  "meta": {
+    "title": "About"
+  }
+}
+</route>
+
+<script setup>
+useHead({
+  title: 'About',
+})
+</script>
+
+<template>
+  <div class="bg-gray-50">
+    <div
+      class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
+    >
+      <h2
+        class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
+      >
+        About Page
+        <br />
+        <span class="text-indigo-600">Vite + Vue 3 + Tailwind CSS</span>
+      </h2>
+      <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+        <div class="inline-flex rounded-md shadow">
+          <router-link
+            to="/"
+            class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-indigo-500 focus:outline-none"
+            >Back Home</router-link
+          >
+        </div>
+        <ButtonRepo />
+      </div>
+    </div>
+  </div>
+</template>

src/pages/index.vue

@@ -0,0 +1,39 @@
+<route lang="json">
+{
+  "meta": {
+    "title": "Home"
+  }
+}
+</route>
+
+<script setup>
+useHead({
+  title: 'Home',
+})
+</script>
+
+<template>
+  <div class="bg-gray-50">
+    <div
+      class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
+    >
+      <h2
+        class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
+      >
+        Ready to dive in?
+        <br />
+        <span class="text-indigo-600">Vite + Vue 3 + Tailwind CSS</span>
+      </h2>
+      <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+        <div class="inline-flex rounded-md shadow">
+          <router-link
+            to="/about"
+            class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-indigo-500 focus:outline-none"
+            >Next Page</router-link
+          >
+        </div>
+        <ButtonRepo />
+      </div>
+    </div>
+  </div>
+</template>

src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

tailwind.config.js

@@ -0,0 +1,19 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/line-clamp'),
+    require('@tailwindcss/aspect-ratio'),
+  ],
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": [
+    "typed-router.d.ts",
+    "components.d.ts",
+    "auto-imports.d.ts",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue"
+  ],
+  "extends": "@vue/tsconfig/tsconfig.json"
+}

typed-router.d.ts

@@ -0,0 +1,125 @@
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+/// <reference types="unplugin-vue-router/client" />
+
+import type {
+  // type safe route locations
+  RouteLocationTypedList,
+  RouteLocationResolvedTypedList,
+  RouteLocationNormalizedTypedList,
+  RouteLocationNormalizedLoadedTypedList,
+
+  // helper types
+  // route definitions
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+
+  // vue-router extensions
+  _RouterTyped,
+  RouterLinkTyped,
+  NavigationGuard,
+  UseLinkFnTyped,
+
+  // data fetching
+  _DataLoader,
+  _DefineLoaderOptions,
+} from 'unplugin-vue-router'
+
+declare module 'vue-router/auto/routes' {
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/[...404]': RouteRecordInfo<'/[...404]', '/:404(.*)', { 404: ParamValue<true> }, { 404: ParamValue<false> }>,
+    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
+  }
+}
+
+declare module 'vue-router/auto' {
+  import type { RouteNamedMap } from 'vue-router/auto/routes'
+
+  export type RouterTyped = _RouterTyped<RouteNamedMap>
+
+  /**
+   * Type safe version of `RouteLocationNormalized` (the type of `to` and `from` in navigation guards).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationNormalized<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocationNormalizedLoaded` (the return type of `useRoute()`).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationNormalizedLoaded<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocationResolved` (the returned route of `router.resolve()`).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationResolved<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationResolvedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocation` . Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocation<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Generate a type safe params for a route location. Requires the name of the route to be passed as a generic.
+   */
+  export type RouteParams<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['params']
+  /**
+   * Generate a type safe raw params for a route location. Requires the name of the route to be passed as a generic.
+   */
+  export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
+
+  export function useRouter(): RouterTyped
+  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
+
+  export const useLink: UseLinkFnTyped<RouteNamedMap>
+
+  export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
+  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
+
+  // Experimental Data Fetching
+
+  export function defineLoader<
+    P extends Promise<any>,
+    Name extends keyof RouteNamedMap = keyof RouteNamedMap,
+    isLazy extends boolean = false,
+  >(
+    name: Name,
+    loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
+    options?: _DefineLoaderOptions<isLazy>,
+  ): _DataLoader<Awaited<P>, isLazy>
+  export function defineLoader<
+    P extends Promise<any>,
+    isLazy extends boolean = false,
+  >(
+    loader: (route: RouteLocationNormalizedLoaded) => P,
+    options?: _DefineLoaderOptions<isLazy>,
+  ): _DataLoader<Awaited<P>, isLazy>
+
+  export {
+    _definePage as definePage,
+    _HasDataLoaderMeta as HasDataLoaderMeta,
+    _setupDataFetchingGuard as setupDataFetchingGuard,
+    _stopDataFetchingScope as stopDataFetchingScope,
+  } from 'unplugin-vue-router/runtime'
+}
+
+declare module 'vue-router' {
+  import type { RouteNamedMap } from 'vue-router/auto/routes'
+
+  export interface TypesConfig {
+    beforeRouteUpdate: NavigationGuard<RouteNamedMap>
+    beforeRouteLeave: NavigationGuard<RouteNamedMap>
+
+    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
+    $router: _RouterTyped<RouteNamedMap>
+
+    RouterLink: RouterLinkTyped<RouteNamedMap>
+  }
+}

vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import VueRouter from 'unplugin-vue-router/vite'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
+import Components from 'unplugin-vue-components/vite'
+import { HeadlessUiResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    VueRouter({}),
+    vue(),
+    Components({ resolvers: [HeadlessUiResolver()] }),
+    AutoImport({
+      imports: ['vue', '@vueuse/head', VueRouterAutoImports],
+    }),
+  ],
+  server: {
+    open: true,
+  },
+})