Vue portfolio templates

A portfolio should show your work quickly and get out of the way. These Vue 3 portfolio templates include project grids, case study pages, about sections and contact forms, built with Tailwind CSS 4 and class-based dark mode.

Projects are defined as data, so adding a new one is a single entry. The templates are plain SFC code with no dependencies besides vue, and you can restyle them by hand or in the Vueplay Studio.

1 template

Preview of Portfolio MinimalFree

Template · Portfolios

Portfolio Minimal

Minimal one-page portfolio template in Vue 3 and Tailwind CSS: intro, selected work with drawn project covers, about, experience and contact.

by Vueplay

Good to know

Building portfolios that hold up

Lead with a few strong projects
Three to six well-explained projects beat a long grid. For each, say what the problem was, what you did and what changed.
Optimize project images
Screenshots are usually the heaviest part of a portfolio. Export them at the size they display, use WebP or AVIF, and lazy load everything below the first screen.
Deploy as a static site
Portfolios rarely need a server. Prerender the pages and host them on any static host with a custom domain.

FAQ

Questions

Can I host a Vue portfolio on a static host?

Yes. Build the site with Vite or generate it with Nuxt, then deploy the output folder to any static host.

How do I add my own projects?

Projects are an array of typed objects, so you add an entry with a title, description, image and links, and the grid and detail pages update from it.

More template categories

Pro feature

Upgrade to Pro

Upgrade to unlock more of Vueplay. Cancel any time.

  • Custom domains with HTTPS
  • Private projects
  • No "Made with Vueplay" badge
  • GitHub sync

$120/year

Compare plansBilling settings