Hato | Minimal Portfolio Showcase with Nuxt UI

Look at Nuxt docs and Nuxt UI docs to learn more.

• Demo here

About

A minimal and elegant template, created with the purpose of serving as a landing page or one-page template, designed for those seeking simplicity and impeccably crafted web elements.

Tailored for designers, agencies, or studios, this template is built with Nuxt 3, Nuxt UI, and TailwindCSS, bringing the best of web technology to the forefront.

• Pages: 1
• Sections: 1
• Components: 7

Features

• 💚 Nuxt 3 - Open source framework that makes web development intuitive and powerful.
• 🎛 Nuxt UI - A UI Library for Modern Web Apps.
• 🎨 TailwindCSS - A utility-first CSS framework packed with classes.
• 🤹 VueUse/Motion - Composables putting your components in motion.
• 🏞 Nuxt Image - Image optimization for Nuxt apps..
• 😀 Simple Icons & Heroicons - Integration with Simple Icons & Heroicons.
• ⚡️ Vite - Powered by Vite, instant HMR.
• 🦾 <script setup lang="ts"> syntax with TypeScript support.

Specifications

• Price: Free
• Released date: 13/04/23
• Version: 0.1
• Tech Stack: Nuxt 3 & TailwindCSS
• Category: Portfolio
• Page Speed: 90 / 100 / 100 / 90
• Compatibility: Chrome, Firefox, Safari, Brave, Arc, Edge

Folder and Component Structrue

The components that are used are inside the components folder and each one is used in the app.vue file.

# src/components/
 - Component1 (SFC a.k.a .vue file)
 - Component2 (SFC a.k.a .vue file)

Setup

Make sure to install the dependencies:

# npm
npm install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

Production

Build the application for production:

# npm
npm run build

Locally preview production build:

# npm
npm run preview

Check out the deployment documentation for more information.