001. Project Demo

002. Initializing a New Project

npm init vue@latest

003. What is TypeScript

004. Reviewing the TypeScript Configuration

005. TypeScript Basics

006. Preparing the Template

pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p


<template>
    <div
            class="font-['Quicksand'] max-w-xl bg-white p-8 shadow-2xl
              rounded absolute m-auto left-0 right-0 mt-32">
        <h1 class="text-center text-3xl text-indigo-700">Vue Filters</h1>
        <div
                class="text-center my-8 py-32 text-slate-700 italic rounded border-4 border-double border-slate-700/25"
        > Drag and drop image.
        </div>
        <div class="my-8">
            <canvas width="448" height="448"></canvas>
            <div class="text-white text-xl mt-4">
                <div class="flex justify-center gap-4">
                    <button type="button" class="bg-pink-600 py-4 w-full">Filter</button>
                    <button type="button" class="bg-pink-600 py-4 w-full">Filter</button>
                    <button type="button" class="bg-pink-600 py-4 w-full">Filter</button>
                </div>
                <a class="bg-indigo-700 py-4 block w-full mt-2 text-center">
                    Download
                </a>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
</script>

007. Adding a Google Font

pnpm i --save-dev vite-plugin-fonts

// vite.config.ts
import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {VitePluginFonts} from 'vite-plugin-fonts'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(), VitePluginFonts({
            google: {
                families: [{
                    name: 'Quicksand'
                }]
            }
        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})