vite

Example Project from A First Look at Vite

Vite (French word for "fast", pronounced /vit/, rhymes with "street") is a frontend build tool and open source project created by Evan You. Vite 2.0 was officially released on February 16, 2021 and aims to provide a faster and leaner development experience for modern web projects. It consists of two parts:

• A dev server with Hot Module Replacement (HMR) that serves your source files over native ES modules
• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production

Clone Repo and Navigate to Project

git clone https://github.com/ajcwebdev/a-first-look.git
cd frontend/vite

Install dependencies and start development server

To run this project on your local machine enter these commands to install the dependencies with yarn and start the development server with yarn dev.

yarn
yarn dev

App Component

<!-- src/App.vue -->

<template>
  <img
    alt="Vue logo"
    src="./assets/logo.png"
  />

  <HelloWorld msg="ajcwebdev" />
</template>

<script setup>
  import HelloWorld from './components/HelloWorld.vue'
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

HelloWorld component

<!-- src/components/HelloWorld.vue -->

<template>
  <h1>{{ msg }}</h1>

  <p>
    <a href="https://ajcwebdev.com" target="_blank">
      Blog
    </a>
    |
    <a href="https://github.com/ajcwebdev" target="_blank">
      GitHub
    </a>
  </p>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  msg: String
})
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

Deploy to Netlify

netlify.toml defines the build command and publish directory for the static assets.

# netlify.toml

[build]
  publish = "dist"
  command = "yarn build"

Connect to your Git provider.

Pick a repository.

Go to site settings.

Create a custom domain name.

Visit ajcwebdev-vite.netlify.app.