feat: tailwind 2 + script setup!

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Anthony Fu // free feel to change it to your name.
+Copyright (c) 2020 Anthony Fu
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -24,12 +24,14 @@
 
 - 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
 
-- 🎨 TailwindCSS with dark mode out-of-box
+- 🎨 [TailwindCSS **v2.0**](https://blog.tailwindcss.com/tailwindcss-v2) with dark mode out-of-box
 
 - 😃 [Use icons from any icon sets, with no compromise](./src/components)
 
 - 🌍 [i18n ready](./locales)
 
+- 🔥 Use the [new `<script setup>` style](https://github.com/vuejs/rfcs/pull/227)
+
 - 🦾 TypeScript, of course
 
 - ☁️ Deploy on Netlify, zero-config
@@ -58,7 +60,7 @@
 
 ### Coding Style
 
-- Use Composition API with [`<script setup>` SFC](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md)
+- Use Composition API with [`<script setup>` SFC](https://github.com/vuejs/rfcs/pull/227)
 - [ESLint](https://eslint.org/) with [@antfu/eslint-config-vue](https://github.com/antfu/eslint-config), single colons, no semi.
 
 ### Dev tools
@@ -76,7 +78,7 @@
 
 ## Variations
 
-As this is template is strongly opinionated, the following provides a curated list for community maintained variations with different preference and feature set. Check them out as well. PR to add yours are also welcome!
+As this is template is strongly opinionated, the following provides a curated list for community maintained variations with different preferences and feature sets. Check them out as well. PR to add yours are also welcome!
 
 - [vitesse-lite](https://github.com/kn0wn/vitesse-lite) by [@kn0wn](https://github.com/kn0wn)
 
@@ -88,7 +90,7 @@ As this is template is strongly opinionated, the following provides a curated li
 
 ### Clone to local
 
-If you prefer do to it manually with cleaner git history
+If you prefer to do it manually with cleaner git history
 
 ```bash
 npx degit antfu/vitesse my-vitesse-app
@@ -127,11 +129,11 @@ To build the App, run
 pnpm build
 ```
 
-And you will see the genrated file in `dist` that ready to be served.
+And you will see the generated file in `dist` that ready to be served.
 
 ### Deploy on Netlify
 
-Go to [Netlify](https://app.netlify.com/start) and select you clone, `OK` along the way, and your App will be live in a minute.
+Go to [Netlify](https://app.netlify.com/start) and select your clone, `OK` along the way, and your App will be live in a minute.
 
 ## Why
 

package.json

@@ -1,37 +1,46 @@
 {
-  "name": "@vitesse/template",
-  "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "vite --port 3333 --open",
     "build": "cross-env NODE_ENV=production vite build"
   },
   "dependencies": {
-    "@iconify/iconify": "^2.0.0-rc.1",
+    "@iconify/iconify": "^2.0.0-rc.2",
-    "@vueuse/core": "^4.0.0-beta.37",
+    "@vueuse/core": "^4.0.0-rc.4",
-    "vue": "^3.0.2",
+    "vue": "^3.0.3",
-    "vue-i18n": "9.0.0-beta.6",
+    "vue-i18n": "9.0.0-beta.8",
-    "vue-router": "^4.0.0-rc.1"
+    "vue-router": "^4.0.0-rc.5"
   },
   "devDependencies": {
     "@antfu/eslint-config-vue": "^0.4.3",
-    "@iconify/json": "^1.1.251",
+    "@iconify/json": "^1.1.265",
     "@purge-icons/generated": "^0.4.1",
-    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "@typescript-eslint/eslint-plugin": "^4.8.2",
-    "@vue/compiler-sfc": "^3.0.2",
+    "@vue/compiler-sfc": "^3.0.3",
     "@vuedx/typescript-plugin-vue": "^0.2.3",
+    "autoprefixer": "^10.0.4",
     "cross-env": "^7.0.2",
-    "eslint": "^7.12.1",
+    "eslint": "^7.14.0",
-    "tailwindcss": "^1.9.6",
+    "tailwindcss": "^2.0.1",
-    "typescript": "^4.0.5",
+    "typescript": "^4.1.2",
-    "vite": "^1.0.0-rc.9",
+    "vite": "^1.0.0-rc.13",
     "vite-plugin-components": "^0.3.0",
-    "vite-plugin-purge-icons": "^0.4.4",
+    "vite-plugin-purge-icons": "^0.4.5",
     "vite-plugin-pwa": "^0.1.5",
     "vite-plugin-voie": "^0.4.0",
     "voie-pages": "^0.4.0"
   },
+  "pnpm": {
+    "overrides": {
+      "postcss": "8",
+      "vue-router": "next"
+    }
+  },
   "eslintConfig": {
-    "extends": "@antfu/eslint-config-vue"
+    "extends": "@antfu/eslint-config-vue",
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "off"
+    }
   }
 }

src/components/Footer.vue

@@ -17,11 +17,11 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
 import { locales } from '/~/messages'
-export { isDark } from '/~/utils'
+import { isDark } from '/~/logics'
 
 const i18n = useI18n()
 
-export const toggleLocales = () => {
+const toggleLocales = () => {
   // change to some real logic
   i18n.locale.value = locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]
 }

src/components/Icon.vue

@@ -3,14 +3,17 @@
 </template>
 
 <script setup="props" lang="ts">
-import { watch, ref, onMounted, nextTick } from 'vue'
+import { watch, ref, onMounted, nextTick, defineProps } from 'vue'
 import Iconify from '@purge-icons/generated'
 
-declare const props: {
+const props = defineProps({
-  icon: string
+  icon: {
-}
+    type: String,
+    required: true,
+  },
+})
 
-export const el = ref<HTMLElement | null>(null)
+const el = ref<HTMLElement | null>(null)
 
 const update = async() => {
   if (el.value) {

src/logics/dark.ts

@@ -1,6 +1,6 @@
 import { watch, computed } from 'vue'
 import { usePreferredDark } from '@vueuse/core'
-import { colorSchema } from '../store'
+import { colorSchema } from './store'
 
 const preferredDark = usePreferredDark()
 

src/logics/index.ts

@@ -0,0 +1,2 @@
+export * from './dark'
+export * from './store'

src/logics/store.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+
+export const colorSchema = useStorage('color-schema', 'auto') as Ref<'auto' | 'dark' | 'light'>

src/main.ts

@@ -1,28 +1,11 @@
 import './main.postcss'
 import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
+import installPlugins from './plugins'
-import { createI18n } from 'vue-i18n'
-
-// import routes generated by Voie
-import routes from 'voie-pages'
-// import icons data generated by PurgeIcons
-import '@purge-icons/generated'
 
 import App from './App.vue'
-import { messages } from './messages'
 
 const app = createApp(App)
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
 
-const i18n = createI18n({
+installPlugins(app)
-  locale: 'en',
-  messages,
-})
-
-app.use(i18n)
-app.use(router)
 
 app.mount('#app')

src/pages/[...all].vue

@@ -8,5 +8,4 @@
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-export { t }
 </script>

src/pages/hi/[name].vue

@@ -14,7 +14,7 @@
     <div>
       <button
         class="btn m-3 text-sm mt-8"
-        @click="back"
+        @click="router.back()"
       >
         {{ t('button.back') }}
       </button>
@@ -22,17 +22,18 @@
   </div>
 </template>
 
-<script setup='props' lang='ts'>
+<script setup lang='ts'>
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { defineProps } from 'vue'
 
-declare const props: {
+const props = defineProps({
-  name: string
+  name: {
-}
+    type: String,
+    require: true,
+  },
+})
 
 const router = useRouter()
-export const back = () => router.push('/')
-
 const { t } = useI18n()
-export { t }
 </script>

src/pages/index.vue

@@ -39,14 +39,13 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
-export const name = ref('')
+const name = ref('')
 
 const router = useRouter()
-export const go = () => {
+const go = () => {
   if (name.value)
     router.push(`/hi/${name.value}`)
 }
 
 const { t } = useI18n()
-export { t }
 </script>

src/plugins/i18n.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue'
+import { createI18n } from 'vue-i18n'
+import { messages } from '../messages'
+
+export default (app: App) => {
+  const i18n = createI18n({
+    locale: 'en',
+    messages,
+  })
+
+  app.use(i18n)
+}

src/plugins/icons.ts

@@ -0,0 +1,2 @@
+// import icons data generated by PurgeIcons
+import '@purge-icons/generated'

src/plugins/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import installRouter from './router'
+import installI18n from './i18n'
+
+export default (app: App) => {
+  installRouter(app)
+  installI18n(app)
+}

src/plugins/router.ts

@@ -0,0 +1,13 @@
+import { App } from 'vue'
+// import routes generated by Voie
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'voie-pages'
+
+export default (app: App) => {
+  const router = createRouter({
+    history: createWebHistory(),
+    routes,
+  })
+
+  app.use(router)
+}

src/store/index.ts

@@ -1 +0,0 @@
-export * from './local'

src/store/local.ts

@@ -1,4 +0,0 @@
-import { Ref } from 'vue'
-import { useStorage } from '@vueuse/core'
-
-export const colorSchema = useStorage('vitesse-schema', 'auto') as Ref<'auto' | 'dark' | 'light'>

src/utils/index.ts

@@ -1 +0,0 @@
-export * from './dark'

tailwind.config.js

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const colors = require('tailwindcss/colors')
 
 module.exports = {
   purge: {
@@ -12,6 +13,9 @@ module.exports = {
   },
   theme: {
     extend: {
+      colors: {
+        teal: colors.teal,
+      },
       opacity: {
         10: '0.1',
         85: '0.85',
@@ -25,17 +29,5 @@ module.exports = {
     textColor: ['dark', 'hover', 'active', 'disabled'],
     opacity: ['dark', 'hover', 'active', 'focus', 'disabled'],
   },
-  future: {
+  darkMode: 'class',
-    purgeLayersByDefault: true,
-    removeDeprecatedGapUtilities: true,
-  },
-  experimental: {
-    darkModeVariant: true,
-    applyComplexClasses: true,
-    uniformColorPalette: true,
-    extendedSpacingScale: true,
-    defaultLineHeights: true,
-    extendedFontSizeScale: true,
-  },
-  dark: 'class',
 }