Nebula UI Kit

A simple collection of components and layouts for building applications with Vuetify 3 and Vite.

Nebula UI Kit is a beautiful resource built over TypeScript, Vite, Vuetify 3 and Vuejs 3. It will help you get started and quickly developing your Vuetify 3 Vite applications in no time. Using the Vite theme is pretty simple but requires basic knowledge of Javascript, Vuejs and Vite.

Getting Started

• Install Nodejs from the official Nodejs page
• Install Yarn from the official Yarn installation page.
• Unzip the nebula-ui-kit.zip file downloaded from the Vuetify store
• Create a folder named nebula-ui-kit and unzip the nebula-ui-kit.zip file provided by the previous step
• Open your terminal and navigate to the nebula-ui-kit directory
• Run yarn install to install the project's dependencies
• Run yarn dev to start a local development server

• yarn run build to build your app for production
• yarn run serve to serve your production app
• yarn run lint to run linting.

Vuetify

Vuetify is an Open Source UI Library that is developed exactly according to Material Design spec. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.

The documentation for Vuetify is hosted here.

Not all components that are available in this project are part of the theme and may be a default Vuetify component

Vite

Vite is a build tool that significantly improves the front-end development experience. You can use Vite to set up a development environment for frameworks like Vue and React, and even for a vanilla JavaScript app with a dev server and hot reloading in just three commands. It also easily integrates with TypeScript.

Table of Contents

• Demo
• Quick Start
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Demo

• Demo page

Quick Start

Getting started with the Nebula UI Kit is straightforward. Follow these steps to set up your development environment and begin creating your application with Vuetify 3 and Vite.

• Ensure you have Node.js and Yarn installed on your system. If not, you can download them from the official Node.js website and Yarn installation page.
• Download the nebula-ui-kit.zip file from the Vuetify store and unzip it into a directory of your choice.
• Open a terminal or command prompt and navigate to the directory where you unzipped the Nebula UI Kit.
• Run yarn install to install all dependencies.
• Once the installation is complete, start the development server by running yarn dev.
• Your default web browser should open automatically, displaying the Nebula UI Kit template. If it doesn't, open your browser and visit http://localhost:3000.

Documentation

The documentation for the Nebula UI Kit covers a wide range of topics, from getting started guides to detailed descriptions of the components and their APIs. Whether you're a beginner or an experienced developer, the documentation offers the information you need to build your projects effectively.

• Getting Started: Learn how to set up your Nebula UI Kit project and start developing.
• Components: Explore the detailed documentation for each component, including API references, examples, and usage tips.
• Layouts & Grid System: Understand how to utilize Vuetify's powerful layout system to create responsive and flexible UI designs.
• Styles & Themes: Customize the look and feel of your application by leveraging Vuetify's theming system.

File Structure

Within the download you'll find the following directories and files:

nebula-ui-kit/
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── index.html
├── package.json
├── public
│   ├── favicon.ico
│   └── nebula.png
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── content
│   │   │   └── content4.jpg
│   │   ├── heroheaders
│   │   │   ├── heroheaders1.png
│   │   │   └── heroheaders2.png
│   │   ├── logo.png
│   │   ├── logo.svg
│   │   ├── nebula.png
│   │   └── pricing
│   │       ├── pricing-icon1.png
│   │       └── pricing-icon2.png
│   ├── components
│   │   ├── Logo.vue
│   │   ├── blog
│   │   │   ├── Blog-v1.vue
│   │   │   └── Blog-v2.vue
│   │   ├── call-to-action
│   │   │   ├── CalltoAction-v1.vue
│   │   │   └── CalltoAction-v2.vue
│   │   ├── contact
│   │   │   ├── Contact-v1.vue
│   │   │   └── Contact-v2.vue
│   │   ├── content
│   │   │   ├── Content-v1.vue
│   │   │   ├── Content-v2.vue
│   │   │   ├── Content-v3.vue
│   │   │   └── Content-v4.vue
│   │   ├── ecommerce
│   │   │   ├── Ecommerce-v1.vue
│   │   │   └── Ecommerce-v2.vue
│   │   ├── features
│   │   │   ├── Features-v1.vue
│   │   │   └── Features-v2.vue
│   │   ├── footer
│   │   │   ├── Footer-v1.vue
│   │   │   └── Footer-v2.vue
│   │   ├── gallery
│   │   │   ├── Gallery-v1.vue
│   │   │   └── Gallery-v2.vue
│   │   ├── header
│   │   │   ├── Header-v1.vue
│   │   │   ├── Header-v10.vue
│   │   │   ├── Header-v2.vue
│   │   │   ├── Header-v3.vue
│   │   │   ├── Header-v4.vue
│   │   │   ├── Header-v5.vue
│   │   │   ├── Header-v6.vue
│   │   │   ├── Header-v7.vue
│   │   │   ├── Header-v8.vue
│   │   │   └── Header-v9.vue
│   │   ├── hero-headers
│   │   │   ├── HeroHeaders-v1.vue
│   │   │   └── HeroHeaders-v2.vue
│   │   ├── pricing
│   │   │   ├── PricingTable-v1.vue
│   │   │   └── PricingTable-v2.vue
│   │   ├── team
│   │   │   ├── Team-v1.vue
│   │   │   └── Team-v2.vue
│   │   ├── testimonial
│   │   │   ├── Testimonial-v1.vue
│   │   │   └── Testimonial-v2.vue
│   │   └── title
│   │       ├── Title-v1.vue
│   │       ├── Title-v2.vue
│   │       ├── Title-v3.vue
│   │       ├── Title-v4.vue
│   │       ├── Title-v5.vue
│   │       └── Title-v6.vue
│   ├── layouts
│   │   └── default
│   │       ├── Default.vue
│   │       ├── Drawer.vue
│   │       └── View.vue
│   ├── main.ts
│   ├── plugins
│   │   ├── defaults.ts
│   │   ├── global-components.ts
│   │   ├── index.ts
│   │   └── vuetify.ts
│   ├── router
│   │   └── index.ts
│   ├── styles
│   │   ├── overrides.scss
│   │   └── settings.scss
│   ├── views
│   │   ├── blog
│   │   │   └── index.vue
│   │   ├── call-to-action
│   │   │   └── index.vue
│   │   ├── contact
│   │   │   └── index.vue
│   │   ├── content
│   │   │   └── index.vue
│   │   ├── ecommerce
│   │   │   └── index.vue
│   │   ├── features
│   │   │   └── index.vue
│   │   ├── footer
│   │   │   └── index.vue
│   │   ├── gallery
│   │   │   └── index.vue
│   │   ├── headers
│   │   │   └── index.vue
│   │   ├── hero-headers
│   │   │   └── index.vue
│   │   ├── pricing
│   │   │   └── index.vue
│   │   ├── team
│   │   │   └── index.vue
│   │   ├── testimonial
│   │   │   └── index.vue
│   │   └── title
│   │       └── index.vue
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

Browser Support

Resources

• Live Preview
• Product Page: Product
• Vuetify Documentation is Here
• Contact: Contact

Reporting Issues

Please report issues to the Vuetify Discord

Technical Support or Questions

If you encounter any issues or have questions about using the Nebula UI Kit, there are several ways to get help:

• Email Support: If you need direct assistance, you can reach out via email at support@vuetifyjs.com.

Licensing

• Copyright 2023 Vuetify
• Vuetify License Information

Useful Links

• Vuetify Documentation
• Vuetify Store
• Discord
• Twitter