Vue3 TypeScript Techpath

Techpath. This repo serves as a frontend to Techpath API.

Goal is to create a frontend where users can save tools and experience they have. This frontend will also serve a dashboard that shows users where they are now in their tech career, where they want to be, how to to get there, and what is the going salary.

Table of Contents

• Features
• UI Framworks
• Icons
• Plugins
• Coding Style
• Dev Tools
• Dev Setup

Features

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild - fast and faster !
• 💪 Typescript - of course! necessary
• 🎉 Element Plus ready - UI Library based on Vue.js 3
• 🔥 Axios - Http Library based on Promise
• 💡 Vue Router 4 - The official router for Vue.js
• 📦 Components auto importing - Automatically register components on demand without import
• 📥 Auto import APIs - Automatically import APIs
• 🍍 State Management via Pinia - The Vue Store that you will enjoy using
• 🎨 Windi CSS - next generation utility-first CSS framework
• 😃 icones - Powerful Icon Library, Use icons from any icon sets
• 🌍 I18n ready - Want to translate? Yes, you can!
• 👩‍🎨 NProgress - Page loading progress feedback
• 😃 SVG Support - Support the use of SVG images as components
• 📑 Markdown Support - Markdown as components / components in Markdown
• 🔑 Complete code style specification and code submission specification
• ☁️ Deploy on Netlify, zero-config

UI Frameworks

• Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features
  • Windi CSS Typography
• Element Plus - A powerful Vue.js 3 UI Library

Icons

• 🔍Icônes - use icons from any icon sets
  • unplugin-icons - Automatically introduce the icons you need on demand

Plugins

• Vue Router 4 - The official router for Vue.js
• Pinia - The Vue Store that you will enjoy using
• Axios - Http Library based on Promise
• unplugin-vue-components - components auto import
• unplugin-auto-import - Automatically import APIs
• vite-plugin-windicss - Windi CSS Integration
• vite-plugin-vue-markdown - Markdown as components / components in Markdown
  • markdown-it-prism - Prism for syntax highlighting
  • prism-theme-vars - customizable Prism.js theme using CSS variables
  • markdown-it-link-attributes - Uniformly set the hyperlink jump mode in markdown
• Vue I18n - Internationalization
  • vite-plugin-vue-i18n - Vite plugin for Vue I18n
• vite-plugin-fonts - Vite's font loader
• VueUse - Collection of useful composition APIs
• vite-svg-loader - Support the use of SVG images as components

Coding Style

• ESLint with Airbnb Style

Dev Tools

• TypeScript
• Netlify - zero-config deployment
• VS Code Extensions
  • Volar -Vue 3 IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • Windi CSS Intellisense - IDE support for Windi CSS
  • ESLint - Code quality and rule checking
  • Prettier - Code formatter - Focus on code formatting and beautifying code
  • EditorConfig for VS Code - Coding style check

Dev Setup

Install Node

First make sure you have Node version 16 or higher node -v

If it is lower than node 16 please follow the instructions below to install a newer version of node:

Please follow here to properly install NVM (Node Version Manager)

After have properly installed nvm run this command:

nvm install 19.3.0

then

nvm use 19.3.0

Install pnpm

npm install -g pnpm

Install packages

pnpm i

Start Dev Environment

pnpm run dev

Pushing to branch

Please make sure to run pnpm run build before pushing your branch to make sure your TS code changes passes the build.