├── public ├── robots.txt └── favicon.ico ├── .gitignore ├── vercel.json ├── postcss.config.js ├── src ├── views │ ├── NotFound.vue │ ├── StateTransition.vue │ ├── Home.vue │ ├── CssAnimations.vue │ ├── ListAnagram1.vue │ ├── ListAnagram2.vue │ ├── JsAnimations.vue │ ├── JsAnimationsAppear.vue │ └── SvgAnimation.vue ├── components │ ├── Boat.vue │ ├── Sun.vue │ ├── Moon.vue │ ├── CodePopup.vue │ ├── Mountains.vue │ ├── Stars.vue │ ├── FgMountains.vue │ └── Clouds.vue ├── main.js ├── tailwind.css ├── routes.js └── App.vue ├── jsconfig.json ├── index.html ├── package.json ├── vite.config.js ├── tailwind.config.js └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | debug.log 7 | .idea -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callumacrae/animation-talk-demo/main/public/favicon.ico -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [ 3 | { "source": "/:path(.*)", "destination": "index.html" } 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/views/NotFound.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/*": ["src/*"] 6 | } 7 | }, 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Boat.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js animation demo 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './tailwind.css' 3 | import App from './App.vue' 4 | import { routes } from './routes.js' 5 | import { createRouter, createWebHistory } from 'vue-router' 6 | 7 | const app = createApp(App) 8 | 9 | const router = createRouter({ 10 | history: createWebHistory(), 11 | routes, 12 | }) 13 | 14 | app.use(router) 15 | app.mount('#app') 16 | -------------------------------------------------------------------------------- /src/components/Sun.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | -------------------------------------------------------------------------------- /src/components/Moon.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 22 | -------------------------------------------------------------------------------- /src/tailwind.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | 3 | @import "tailwindcss/components"; 4 | 5 | @import "tailwindcss/utilities"; 6 | 7 | @layer base { 8 | h1 { 9 | @apply text-6xl font-extrabold leading-none; 10 | } 11 | h2 { 12 | @apply text-3xl font-extrabold; 13 | } 14 | a { 15 | @apply underline; 16 | } 17 | p { 18 | @apply mb-4; 19 | } 20 | .button { 21 | @apply px-5 py-3 text-2xl font-bold no-underline border-2 border-border rounded-md hover:bg-border; 22 | } 23 | [type="text"] { 24 | @apply rounded-sm bg-hover; 25 | } 26 | } 27 | 28 | html { 29 | box-sizing: border-box; 30 | } 31 | *, *:before, *:after { 32 | box-sizing: inherit; 33 | } 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-vue3-tailwind-starter", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --host", 6 | "build": "vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "@tailwindcss/forms": "^0.3.4", 11 | "chroma-js": "^2.1.2", 12 | "gsap": "^3.8.0", 13 | "lodash": "^4.17.21", 14 | "prismjs": "^1.25.0", 15 | "vue": "^3.2.19", 16 | "vue-global-events": "^2.1.0", 17 | "vue-router": "^4.0.11", 18 | "vue-slider-component": "^4.0.0-beta.4" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^10.3.6", 22 | "@types/tailwindcss": "^2.2.1", 23 | "tailwindcss": "^2.2.16", 24 | "@vitejs/plugin-vue": "^1.9.2", 25 | "vite": "^2.6.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import { resolve } from "path"; 4 | 5 | const vueCodePlugin = { 6 | name: "code-plugin", 7 | transform(code, id) { 8 | if (!/vue&type=code/.test(id)) { 9 | return; 10 | } 11 | 12 | return `export default Comp => { 13 | Comp.code = \`${code}\`; 14 | }`; 15 | }, 16 | }; 17 | 18 | export default defineConfig({ 19 | plugins: [ 20 | vue({ 21 | template: { 22 | compilerOptions: { 23 | whitespace: "preserve", 24 | }, 25 | }, 26 | }), 27 | vueCodePlugin, 28 | ], 29 | resolve: { 30 | alias: { 31 | "@": resolve(__dirname, "src"), 32 | }, 33 | }, 34 | server: { 35 | open: true, 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require("tailwindcss/defaultTheme"); 2 | 3 | /** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */ 4 | module.exports = { 5 | mode: "jit", 6 | purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], 7 | theme: { 8 | colors: { 9 | white: "white", 10 | bgMain: "rgb(31, 41, 55)", 11 | bgSidebar: "rgb(17, 24, 39)", 12 | primary: "rgb(229, 231, 235)", 13 | secondary: "rgb(191, 219, 254)", 14 | active: "rgb(31, 41, 55)", 15 | hover: "rgb(55, 65, 81)", 16 | border: "rgb(75, 85, 99)", 17 | }, 18 | extend: { 19 | fontFamily: { 20 | sans: ["Ruddy", ...defaultTheme.fontFamily.sans], 21 | }, 22 | }, 23 | }, 24 | plugins: [require("@tailwindcss/forms")], 25 | }; 26 | -------------------------------------------------------------------------------- /src/views/StateTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | 20 | 21 | 33 | 34 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/CodePopup.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 36 | 37 | 48 | -------------------------------------------------------------------------------- /src/components/Mountains.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 36 | -------------------------------------------------------------------------------- /src/components/Stars.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 64 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from "./views/Home.vue"; 2 | 3 | /** @type {import('vue-router').RouterOptions['routes']} */ 4 | export const routes = [ 5 | { path: "/", component: Home, meta: { title: "Home" } }, 6 | { 7 | path: "/css-animations", 8 | meta: { title: "CSS Animations" }, 9 | component: () => import("./views/CssAnimations.vue"), 10 | }, 11 | { 12 | path: "/js-animations", 13 | meta: { title: "JS Animations" }, 14 | component: () => import("./views/JsAnimations.vue"), 15 | }, 16 | { 17 | path: "/js-animations-appear", 18 | meta: { title: "JS Animations" }, 19 | component: () => import("./views/JsAnimationsAppear.vue"), 20 | }, 21 | { 22 | path: "/list-anagram-1", 23 | meta: { title: "List animations (enter + leave)" }, 24 | component: () => import("./views/ListAnagram1.vue"), 25 | }, 26 | { 27 | path: "/list-anagram-2", 28 | meta: { title: "List animations (move)" }, 29 | component: () => import("./views/ListAnagram2.vue"), 30 | }, 31 | { 32 | path: "/state-transitions", 33 | meta: { title: "State transitions" }, 34 | component: () => import("./views/StateTransition.vue"), 35 | }, 36 | { 37 | path: "/svg-animations", 38 | meta: { title: "SVG transitions" }, 39 | component: () => import("./views/SvgAnimation.vue"), 40 | }, 41 | { path: "/:path(.*)", component: () => import("./views/NotFound.vue") }, 42 | ]; 43 | -------------------------------------------------------------------------------- /src/components/FgMountains.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 39 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 | 31 | 35 | 36 | 43 | 44 | 58 | 59 | -------------------------------------------------------------------------------- /src/views/CssAnimations.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 42 | 43 | 44 | 48 | 49 | 54 | 55 | 76 | 77 | -------------------------------------------------------------------------------- /src/views/ListAnagram1.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | 31 | 43 | 44 | 45 | 54 | 55 | 68 | 69 | 79 | 80 | -------------------------------------------------------------------------------- /src/components/Clouds.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 62 | 63 | 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `Vite + Vue 3 + Tailwind CSS (starter) ⚡` 2 | 3 | ![Vite, Vue, Tailwind CSS](https://user-images.githubusercontent.com/11320080/111277027-a9384c00-8640-11eb-8323-21889bd7c609.png) 4 | 5 | This starter template also includes: 6 | 7 | - [Vue Router 4.x](https://github.com/vuejs/vue-router-next) 8 | - [Inter var font](https://github.com/rsms/inter) (self-hosted, woff2, v3.19, with 'preload' attr, check out index.html) 9 | - [Just-in-Time](https://tailwindcss.com/docs/just-in-time-mode) mode by default introduced in Tailwind CSS v2.1 (in preview!) 10 | - [Headless UI](https://headlessui.dev/vue/menu) - unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS 11 | - [Heroicons](https://github.com/tailwindlabs/heroicons#vue) - beautiful hand-crafted SVG icons, 12 | by the makers of Tailwind CSS 13 | 14 | First-party plugins needed for Tailwind UI: 15 | 16 | - [tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) 17 | - [tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography) 18 | - [tailwindcss/line-clamp](https://github.com/tailwindlabs/tailwindcss-line-clamp) 19 | - [tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) 20 | 21 | ### Getting Started 🚀 22 | 23 | [![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/web2033/vite-vue3-tailwind-starter) 24 | 25 | ```sh 26 | npx degit web2033/vite-vue3-tailwind-starter vvt-app 27 | cd vvt-app 28 | ``` 29 | 30 | npm: 31 | ```sh 32 | npm i 33 | npm run dev 34 | npm run build 35 | npm run serve 36 | ``` 37 | 38 | yarn: 39 | ```sh 40 | yarn 41 | yarn dev 42 | yarn build 43 | yarn serve 44 | ``` 45 | 46 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/web2033/vite-vue3-tailwind-starter) 47 | 48 | #### Bonus links 49 | - [Enabling https on localhost](https://github.com/web2033/vite-vue3-tailwind-starter/discussions/112) (dev notes) 50 | - [Vite dev server with netlify dev support](https://github.com/web2033/vite-vue3-tailwind-starter/discussions/113) (dev notes) 51 | - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - recommended (instead of Vetur) VSCode extension built specifically for Vue 3 52 | - [Pinia](https://pinia.esm.dev/introduction.html) - state-management alternative to Vuex 4 with a similar to upcoming Vuex 5 API 53 | - [VueUse](https://vueuse.org/functions.html) - collection of essential Vue Composition Utilities -------------------------------------------------------------------------------- /src/views/ListAnagram2.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 41 | 42 | 59 | 60 | 61 | 81 | 82 | 97 | 98 | 115 | 116 | -------------------------------------------------------------------------------- /src/views/JsAnimations.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 61 | 62 | 63 | 85 | 86 | 97 | 98 | -------------------------------------------------------------------------------- /src/views/JsAnimationsAppear.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 66 | 67 | 68 | 90 | 91 | 102 | 103 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 86 | 87 | 125 | -------------------------------------------------------------------------------- /src/views/SvgAnimation.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 155 | 156 | 188 | --------------------------------------------------------------------------------