First look at Vue3 with a basic bitly clone

Vue-3 first look : Bitly clone

Features

• ⚡️ Vue3, Vite, pnpm, ESBuild - born with fastness

• 🗂 File based routing

• 📲 Components auto importing

• 🎨 TailwindCSS with dark mode out-of-box

• 😃 Use icons from any icon sets, with no compromise

• 🌍 i18n ready

• 🦾 TypeScript

• ☁️ Deploy on Netlify, zero config

UI Frameworks

• Tailwind CSS - with built-in dark mode!

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• PurgeIcons - bundles only the icons that you use

Plugins

• Vue Router
  • vite-plugin-voie - file system based routing
• vite-plugin-components - components auto import
• vue-i18n - internationalization
• VueUse - collection of useful composition APIs

Coding Style

• Use Composition API with <script setup> SFC
• ESLint with @antfu/eslint-config-vue, single colons, no semi.

Dev tools

• TypeScript
  • Vue TypeScript Plugin - better type support for Vue
• pnpm - fast, disk space efficient package manager
• Netlify - deploy
• VS Code Extensions
  • Iconify IntelliSense
  • i18n Ally
  • Tailwind CSS IntelliSense
  • Vetur
  • ESLint

Usage

Front + Back

Just run and visit http://localhost:8080

# Start server (make sure docker is running)
docker-compose up

# Make sure pnpm is installed or run npm install pnpm -g
cd front
pnpm install
pnpm run dev

Build

To build the App, run

cd front
pnpm run build

And you will see the genrated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select you clone, OK along the way, and your App will be live in a minute.

Download Details:

Author: mlaraki

Source Code: https://github.com/mlaraki/Vue3-Bitly-Clone

#vuejs #vue #javascript