Garry Taylor

Garry Taylor

1657877456

Vite 3 : The Fastest Development Server Available Now!

Vite 3 : The Fastest Development Server Available Now! ⚡️

In this video, let's take a look at all the major changes in Vite 3 and how one can start working on it right away!

Vite 3.0 is out!

In February last year, Evan You released Vite 2. Since then, its adoption has grown non-stop, reaching more than 1 million npm downloads per week. A sprawling ecosystem rapidly formed after the release. Vite is powering a renewed innovation race in Web frameworks. Nuxt 3 uses Vite by default. SvelteKit, Astro, Hydrogen, and SolidStart are all built with Vite. Laravel has now decided to use Vite by default. Vite Ruby shows how Vite can improve Rails DX. Vitest is making strides as a Vite-native alternative to Jest. Vite is behind Cypress and Playwright's new Component Testing features, Storybook has Vite as an official builder. And the list goes on. Maintainers from most of these projects got involved in improving the Vite core itself, working closely with the Vite team and other contributors.

Vite 3 Announcement Cover Image

Today, 16 months from the v2 launch we are happy to announce the release of Vite 3. We decided to release a new Vite major at least every year to align with Node.js's EOL, and take the opportunity to review Vite's API regularly with a short migration path for projects in the ecosystem.

Quick links:

If you are new to Vite, we recommend reading the Why Vite Guide. Then check out the Getting Started and Features guide to see what Vite provides out of the box. As usual, contributions are welcome at GitHub. More than 600 collaborators have helped improve Vite so far. Follow the updates on Twitter, or join discussions with other Vite users on our Discord chat server.

New Documentation#

Go to vitejs.dev to enjoy the new v3 docs. Vite is now using the new VitePress default theme, with a stunning dark mode between other features.

Vite documentation frontpage

Several projects in the ecosystem have already migrated to it (see Vitest, vite-plugin-pwa, and VitePress itself).

If you need to access the Vite 2 docs, they will remain online at v2.vitejs.dev. There is also a new main.vitejs.dev subdomain, where each commit to Vite’s main branch is auto deployed. This is useful when testing beta versions or contributing to the core’s development.

There is also now an official Spanish translation, that has been added to the previous Chinese and Japanese translations:

Read more: https://vitejs.dev

#javascript #vite #vitejs 

Vite 3 : The Fastest Development Server Available Now!
Meggie Flatley

Meggie Flatley

1656752400

Vuelix: Vue 3 + Vite Template/framework

Vuelix

Vuelix is a Vue 3 + Vite starter template to scaffold new projects really fast and with a great developer experience.

Table of contents

Setup

Install Dependencies

npm install

Generate API client

npm run gen-api

NOTE: This command requires a java jvm to be installed, if you want to avoid asking all developers to install it check OpenAPI Client Generator for more info.

Start the development server

npm run dev

Build

To build the app, run

npm run build

And to preview it, after building the app run

npm run serve

Features

🚀 Vue 3 + Vite 2

The version 3 of Vue with its powerful Composition API is available in this project.

The new <script setup> SFCs syntax is also available and recommended.

Vite is the lightning Fast Next Generation Frontend Tooling that highly improves the development experience along with all the community-created plugins.

NOTE: The initial state of this project was generated using Vite oficial scaffolding: npm init vite@latest

See:

🦾 TypeScript and SCSS

TypeScript and SCSS languages are supported and strongly recommended.

See:

🗂 File system routing

Routes for vue-router will be auto-generated from Vue files in the src/pages using the file structure.

See:

📑 Layouts system

Vue components in the src/layouts dir are used as layouts. By default, default.vue will be used unless an alternative is specified in the route meta.

You can specify the layout in the page's SFCs like this:

<route lang="yaml">
meta:
  layout: home
</route>

See:

🔗 Path Aliasing

@/ is aliased to the ./src/ folder.

For example, instead of having

import HelloWorld from '../../../components/HelloWorld.vue'

you can use

import HelloWorld from '@/components/HelloWorld.vue'

😃 Universal Icons Framework

Use icons from any icon set, one syntax for all icons: Material Design Icons, Bootstrap Icons, Font Awesome, etc. All icons libraries are available powered by iconify and unplugin-icons. And don't worry, only the icons you use would be included in the final bundle, keeping the production build lightweight.

The usage is simple, if you want for instance a Material Design Icon (mdi) with name "thumb-up", then just place this inside your template:

<i-mdi-thumb-up />

Just by placing it, the unplugin-icons/resolver would look for the corresponding icon and in case the related iconify icon set is not installed, it would automatically install it using npm, e.g. @iconify-json/mdi.

The convention to use icons is as follows:

{prefix}-{collection}-{icon}

Where the prefix is "i", the collection is the collection ID from https://icon-sets.iconify.design/, and finally the icon is the icon name.

See:

✨ Routes Transitions

Route changes are animated. By default, the fade transition will be used unless an alternative is specified in the route meta.

The fade and slide-fade transitions are available. You can specify the transition in the page's SFCs like this:

<route lang="yaml">
meta:
  transition: slide-fade
</route>

NOTE: Transitions are not triggered between routes of the same type, therefore changing the parameters of the active route won't cause a route transition. This could be changed by using the route.fullPath instead of route.name as the key in RouterViewTransition.vue. More info: https://stackoverflow.com/a/70042452/4873750.

Route transitions can be deactivated by changing the provided enable-route-transitions value in main.ts.

See:

🪄 Eslint + Prettier

This project comes with the recommended Eslint configuration for Vue 3 plus integration with Prettier. Prettier helps formatting code while Eslint helps catching bugs in development.

When opening the project in VSCode, it will ask the developers to install Eslint and Prettier, because that way the VSCode settings.json will work and therefore both Prettier and Eslint fix will be executed when saving a file.

Aditionally, commands to lint, check and autoformat code are available in the scripts of package.json

See:

🔧 OpenAPI Client Generator

Manually creating an API client is hard to maintain and time demanding, but thanks to OpenAPI and its generators we can now generate the entire API client from an OpenAPI Spec.

To do so just place your spec in spec/schema.yml, then run:

npm run gen-api

Which would generate the API client in Typescript and place the generated code in src/api-client.

NOTE: This command requires java to be installed, because the OpenAPI generator is built with it, if you want to avoid asking all developers to install a jvm and run this command by themselves, just run it once you change the OpenAPI spec, and commit the generated code, for that you need to remove the /src/api-client line from the .gitignore. The reason we exclude the generated client by default if because it can always be generated from the spec (spec/schema.yml), and because the spec file is actually versioned, then the code reviewing is improved by checking only spec changes and not the generated code that nobody wrotes.

INFO: If you have a Mac with an M1 Chip, this page have the correct OpenJDK installers for you: https://www.azul.com/downloads/?os=macos&architecture=arm-64-bit

To use the generated APIs just initialize them and make it available for the rest of the application. The following is an example using Swagger Demo PetStore API:

// "api/index.ts"
import { PetApi } from '@/api-client'
export const petApi = new PetApi()

You can also configure the APIs parameters like basePath and provide your own axios instance with interceptors configured like this:

// "api/index.ts"
import { PetApi } from '@/api-client'
import { Configuration } from '@/api-client/configuration'
import axiosInstance from './axios'

// See Vite env vars: https://vitejs.dev/guide/env-and-mode.html
const config = new Configuration({ basePath: import.meta.env.BASE_URL })
export const petApi = new PetApi(config, undefined, axiosInstance)

Then in your Vue Components:

<!-- "pages/home.vue" -->
<script setup lang="ts">
  import { petApi } from '@/api'
  import { Pet, PetStatusEnum } from '@/api-client'
  import { ref } from 'vue'

  const pets = ref<Pet[]>()
  const loading = ref(false)

  async function testOpenAPI() {
    loading.value = true
    const { data } = await petApi.findPetsByStatus({ status: [PetStatusEnum.Available] })
    pets.value = data.slice(0, 10)
    loading.value = false
  }
</script>

See:

👤 Authentication System

The auth system consist on three main parts:

  • The Plugin
  • The Navigation Guards
  • The Axios Interceptors

The Auth Plugin

The plugin is installed in Vue's globalProperties with the name $auth, it includes an isAuthenticated property, an user object, an accessToken plus the login and logout functions. It can be used in templates like this:

<span v-if="$auth.isAuthenticated">
  Authenticated as <b>{{ $auth.user.email }}</b>
  <button @click="$auth.logout">Logout</button>
</span>
<span v-else>Not Authenticated</span>

The auth instance is created using the composition API, therefore we can alternatively retrieve it outside of components with the useAuth function:

import { useAuth } from './useAuth'

const auth = useAuth()
if (auth.isAuthenticated) {
  console.log(auth.userFullName)
}

<script setup lang="ts">
  import { useAuth } from './useAuth'
  import { watchEffect } from 'vue'

  const auth = useAuth()
  watchEffect(() => {
    console.log(auth.isAuthenticated)
  })
</script>

Aditionally, the auth plugin can be inspected in the Vue's Devtools panel when having the extension in the browser. The plugin's values are displayed when inspecting any component.

The Navigation Guards

The navigation guards protects pages from non-authenticated users and redirect them to the login page, by default all pages but the login page are protected.

In order to make a page available for non-authenticated users, a route meta boolean called public needs to be configured in the page. E.g:

<!-- pages/index.html -->
<route lang="yaml">
meta:
  public: true
</route>

The navigation guards can be disabled by changing the autoConfigureNavigationGuards when configuring the auth system:

// main.ts
import { createApp } from 'vue'
import { createAuth } from './auth'
import App from './App.vue'
import router from './router'

const auth = createAuth({
  router,
  loginRouteName: 'login',
  autoConfigureNavigationGuards: false,
})

const app = createApp(App)
app.use(router)
app.use(auth)

The Axios Interceptors

The axios interceptors helps appending auth information to requests and responses of APIs.

The main interceptor adds the Authorization header with a value of Bearer the-token-value to all authenticated requests.

This can be configured and disabled in the createAuth options:

// api/axios.ts
import axios from 'axios'

const axiosInstance = axios.create()
export default axiosInstance

// main.ts
import { createApp } from 'vue'
import { createAuth } from './auth'
import App from './App.vue'
import router from './router'
import axiosInstance from './api/axios'

const auth = createAuth({
  router,
  axios: {
    instance: axiosInstance,
    autoAddAuthorizationHeader: true, // default: false
    authorizationHeaderPrefix: 'Token', // default: 'Bearer'
  },
})

const app = createApp(App)
app.use(router)
app.use(auth)

See:

🌐 Internationalization: vue-i18n and vue-i18n-extract

The vue-i18n package is used as the internationalization system.

All translation files located in the locales dir are loaded automatically with the corresponding language code obtained from the file name, e.g. locales/es.json -> lang code: es.

How to use it?

Put the texts in the original language inside the function of vue-i18n, for example:

<!-- Single or double quote, and template literals -->
<p>{{ $t('Hello World') }} {{ $t("Hello, how are you?") }} {{ $t(`Hey. I'm watching you!`) }}</p>

<!-- *Note: to be able to use it in tags or when we send text to a component, we must use the single quote format
and bind it to the attribute. -->

<MyComponent :text="$t('example text')" />

<b-form-input v-model="name" type="text" :placeholder="$t('Name')"></b-form-input>

// In TS:
<script setup lang="ts">
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()
  t('This is an example')
</script>

You may have noticed that we don't use translations keys like: greetings.hello, the reason is that defining keys is a troublesome task, and keys doesn't always show what we want to display, take this translation file for example:

// es.json

{
  "greetings": {
    "hello": "Hola, ¿cómo estás?."
  }
}

And the corresponding translation usage:

// Component.vue

t('greetings.hello')

By just looking at the translation key, we won't know what the original text was, now look a this example:

// es.json

{
  "Hello, how are you?": "Hola, ¿cómo estás?."
}

// Component.vue

$t('Hello, how are you?')

Better right?, we can directly see the original text, and it's much simpler to translate, we also won't need to define keys because the original text is the key!.

Browser language detection

The default language would match the language of the browser, in case the language is not supported by the application, the fallback language en would be activated.

Vue i18n extract

Manually extracting the texts from vue or js,ts files is a complex task, we are often lazy to do so or we forget to add them, therefore we lose the sync between the translations files and the source code, that's why we use vue-i18n-extract, a handy tool that runs static analysis of the source code files and extracts the translation texts from the source code and add them to the translations files like es.json, en.json, de.json, etc. It no only adds the missing keys but also with a command we can remove the no longer used translations.

To extract the keys/original text into the translations files, run:

npm run vue-i18n-extract

This executes the command located in package.json, which will search for the keys in the vue files given, compare it with the files inside the lang folder and if it finds new words, it will add them.

This script uses the vue-i18n-extract.config.js file for its configuration. This file is located in the root of the project.

Adding a new language:

To add a new language, for instance the German language, just create its file inside the locales folder using its language code, example: ./locales/de.json. Then run npm run vue-i18n-extract to populate the translation keys into that file.

IMPORTANT: When creating the file, make it a valid JSON file, then at least it must has {}, otherwise the extraction would fail.

Example:

// locales/es.json

{
}

The file would be loaded automatically by vite, a vite restart may be needed.

Removing unused translations

In case you want to remove the keys that are in the translation files but are not being used in the vue files, you can run:

npm run vue-i18n-extract-remove

See:

Recommended IDE Setup

Deployment

Heroku

In Heroku create the app, then configure the following buildpacks in the same order:

  • heroku/jvm
  • heroku/nodejs
  • heroku-community/static

Config the Heroku remote:

heroku login
heroku git:remote -a <app_name>

Finally, push the changes:

git push heroku main

Author: helixsoftco
Source code: https://github.com/helixsoftco/vuelix
License: 

#vue #vuejs #vite #vitejs #typescript 

Vuelix: Vue 3 + Vite Template/framework
Meggie Flatley

Meggie Flatley

1656741600

Vue Tail Fire: Vue 3 | Vite | Firebase 9 | Tailwind CSS.

Vue-Fire-Tail 😎

Demo Here: Vue-Fire-Tail

Try Logging with the following

Email Address: test@gmail.com
Password: test@12345

Steps

Why Vue Fire Tail

At times it get very irritating when you want to start your new project which is a firebase project in which you have to set Authentication Flow EVERYTIME. You have to add Routes, Protect your routes, create a Login & Register component, Style those component and have a nice Loading animation, Validate your login/register form. and much much more.

Here is Vue-Fire-Tail Boiler plate for you😊. Vue-Fire-Tail is powered by next-gen technologies like Vue 3 and Firebase 9 along with the power of Vite and Tailwind CSS v3.

Latest and greatest Technologies

  1. Vue 3
  2. Firebase v9
  3. Tailwind CSS v3
  4. Font Awesome
  5. Headless UI
  6. Vite

Features

  1. Email Password Authetication & Google Authetication
  2. Forgot Password Feature
  3. Login & SignUp forms validations
  4. Fallback Page (404 Page), Loaders and page transitions for smooth user experience
  5. Font Awesome Icons pre configured.

Quick Start

git clone https://github.com/sushil-kamble/vue-tail-fire.git my-project
yarn

Make sure you replace my-project with your own project name

If you don't have yarn installed

 

npm i

Remove yarn.lock as you will already have package.lock

 

  1. Go to Firebase console. Add Project. In project overview, click on the web icon and register the app. You will see firebaseConfig object, We will require its details further. Click on Authetication, then on set up sign-in method. Enable Email/password authentication & google authentication.
  2. Create a .env.local file in your project's root. Example of .env.local file is given below. Make sure you replace YOUR_FIREBASE_CONSOLE_DETAILS with your firebaseConfig object details.
VITE_APP_API_KEY=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_AUTH_DOMAIN=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_DATABASE_URL=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_PROJECT_ID=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_STORAGE_BUCKET=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_MESSAGING_SENDER_ID=YOUR_FIREBASE_CONSOLE_DETAILS
VITE_APP_APP_ID=YOUR_FIREBASE_CONSOLE_DETAILS
  1. That's It ! Finally run the application
yarn dev # OR npm run dev

Documentation

Pages

  • Home Page
  • Login Page
  • Sign Up Page
  • Forgot Password Page
  • 404 Page
  • Profile Page - Auth Required
  • Database Page - Auth Required

Helpers

  • Class suffixed with t- will be found /src/assets/index.css, they are basically global styles

Some basic html elements and classes are already configured check out, /src/assets/index.css

  • useAuthState in /src/firebase.js returns { user, error, isAuthenticated }
  • useSignOut in /src/firebase.js - Signs Out User
  • getUserState in /src/firebase.js - Returns promise
  • isValidEmail /src/helpers/index.js function returns true if email is valid
  • Loading in /src/components/Loading.vue - Loading spinner
  • Dialog in /src/components/Dialog.vue - Headless UI dialog

Theme

  • Font - Ubuntu (font-text) & Goldman (font-heading)
  • Primary Color - Tailwind - colors.sky["500"]
  • Secondary Color - Tailwind - colors.slate["700"]
  • Background Color - Tailwind - .bg-secondary/90
  • Error Color - Tailwind - colors.red["500"]

Font Awesome

  • Go here
  • Select any icon, suppose you want to use <i class="fas fa-address-book"></i> then import faAddressBook in /src/main.js
  • Add it to library. (See in main.js)
  • Use it like <font-awesome-icon :icon="['fas', 'address-book']" />
  • For more info visit here

Recommended IDE Setup

Author: sushil-kamble
Source code: https://github.com/sushil-kamble/vue-tail-fire
License:

#vite #vitejs #vue #vuejs #firebase #tailwindcss 

Vue Tail Fire: Vue 3 | Vite | Firebase 9 | Tailwind CSS.
Meggie Flatley

Meggie Flatley

1656730800

Vitespa: Vitesse-based SPA without SSG.

Mocking up web app with Vitesse(speed)

Live Demo

Features

⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness

🗂 File based routing

📦 Components auto importing

🍍 State Management via Pinia

📑 Layout system

📲 PWA

🎨 Windi CSS - next generation utility-first CSS framework

😃 Use icons from any icon sets, with no compromise

🌍 I18n ready

🗒 Markdown Support

🔥 Use the new <script setup> syntax

📥 APIs auto importing - use Composition API and others directly

🖨 Server-side generation (SSG) via vite-ssg

🦔 Critical CSS via critters

🦾 TypeScript, of course

☁️ Deploy on Netlify, zero-config

 

Pre-packed

UI Frameworks

Icons

Plugins

Coding Style

Dev tools

Variations

As this template is strongly opinionated, the following provides a curated list for community-maintained variations with different preferences and feature sets. Check them out as well. PR to add yours is also welcome!

Official

Community

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Checklist

When you use this template, try follow the checklist to update your info properly

  •  Rename name field in package.json
  •  Change the author name in LICENSE
  •  Change the title in App.vue
  •  Change the favicon in public
  •  Remove the .github folder which contains the funding info
  •  Clean up the READMEs and remove routes

And, enjoy :)

Usage

Development

Just run and visit http://localhost:3333

pnpm dev

Build

To build the App, run

pnpm build

And you will see the generated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Why

I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.

So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. (see community maintained variation forks)

Author: ctholho
Source code: https://github.com/ctholho/vitespa
License:  MIT license

#vite #vitejs #vue #vuejs 

Vitespa: Vitesse-based SPA without SSG.
Meggie Flatley

Meggie Flatley

1656720000

Vitailse: Opinionated Vite Starter Template with TailwindCSS

Opinionated Vite starter template with TailwindCSS

Inspired by Vitesse ❤

Features

⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness

🗂 File based routing

📦 Components auto importing

🍍 State Management via Pinia

📑 Layout system

📲 PWA

🌍 I18n ready

🎨 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

😃 Use icons from any icon sets, with no compromise

🔥 Use the new <script setup> syntax

📥 APIs auto importing - use Composition API and others directly

🖨 Server-side generation (SSG) via vite-ssg

🦔 Critical CSS via critters

🦾 TypeScript, of course

Pre-packed

UI Frameworks

Icons

Plugins

Coding Style

Dev tools

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit zynth17/vitailse my-vitailse-app
cd my-vitailse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Checklist

When you use this template, try follow the checklist to update your info properly

  •  Rename name field in package.json
  •  Change the author name in LICENSE
  •  Change the title in App.vue
  •  Change the favicon in public
  •  Remove the .github folder which contains the funding info
  •  Clean up the READMEs and remove routes

And, enjoy :)

Usage

Development

Just run and visit http://localhost:3000

pnpm dev

Preview in Https

Just run and visit https://localhost

pnpm build && pnpm run https-preview

Build

To build the App, run

pnpm build

And you will see the generated file in dist that ready to be served.

Author: zynth17
Source code: https://github.com/zynth17/vitailse
License: MIT license

#vite #vitejs #vue #vuejs 

Vitailse: Opinionated Vite Starter Template with TailwindCSS
Meggie Flatley

Meggie Flatley

1656709200

Naive UI Dashboard Template with TypeScript, WindiCSS

Naive-ui Dashboard Template

This template is taken from Mx Space Admin v2 and styled the same way.

  • WindiCSS
  • Vue 3 Tsx
  • PostCSS
  • Pinia

Usage

Just use it as a regular template, you can style it in 'configs.json'.

pnpm i
pnpm run dev

UI screenshots

Author: Innei
Source code: https://github.com/Innei/naive-ui-dashboard-template
License:

#vite #vitejs #vue #vuejs #typescript 

Naive UI Dashboard Template with TypeScript, WindiCSS
Meggie Flatley

Meggie Flatley

1656698400

Vite Vue3 Tsx: Sample Development with Vue 3 and Typescript in Vite

Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite.

Recommended IDE Setup

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from VSCode command palette.

Author: snowdreamtech
Source code: https://github.com/snowdreamtech/vite-vue3-tsx-starter
License: MIT license

#vite #vitejs #vue #vuejs 

Vite Vue3 Tsx: Sample Development with Vue 3 and Typescript in Vite
Meggie Flatley

Meggie Flatley

1656687600

Vue Component Template: A Template for Creating Own Vue3 TSX Component

Vue Component Template

this template includes:

  • Vue 3
  • TypeScript
  • TSX
  • Rollup
  • Eslint
  • Prettier

It will help you to create own component

Getting Started

npx degit Houtaroy/vue-component-template my-component
cd my-component

yarn:

yarn
yarn dev
yarn build

pnpm:

pnpm install
pnpm dev
pnpm build

Utils

provide a componentUtil to set install to your component

Author: Houtaroy
Source code: https://github.com/Houtaroy/vue-component-template
License: 

#vue #vite #vuejs #vitejs #typescript 

Vue Component Template: A Template for Creating Own Vue3 TSX Component
Meggie Flatley

Meggie Flatley

1656666000

Opinionated Vite Starter Template with SSR in Cloudflare Workers

Vitessedge

Deploy your fullstack SSR apps to Cloudflare Workers using Vitedge.

Live Demo

Vue + Vite + SSR template based on @antfu's Vitesse

Features

⚡️ Vue 3, Vite 2, ESBuild - born with fastness

⚔️ Edge-side rendering in Cloudflare Workers via Vitedge, with edge cache and HTTP/2 server push

🗂 File based routing

📦 Components auto importing

📑 Layout system

📲 PWA

🎨 Windi CSS - on-demand Tailwind CSS with speed

😃 Use icons from any icon sets, with no compromise

🌍 I18n ready with different routes for each language.

🗒 Markdown Support

🔥 Use the new <script setup> style

🦾 TypeScript, of course

☁️ Deploy on Cloudflare Workers, minimal setup
 

Pre-packed

UI Frameworks

Icons

Plugins

Coding Style

Dev tools

Variations

As this template is strongly opinionated, the following provides a curated list for community maintained variations with different preferences and feature sets. Check them out as well. PR to add yours are also welcome!

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit frandiox/vitessedge-template my-vitesse-app
cd my-vitesse-app
npm i

Checklist

When you use this template, try follow the checklist to update your info properly

  •  Rename name field in package.json
  •  Change the author name in LICENSE
  •  Change the title in index.html
  •  Change the favicon in public
  •  Remove the .github folder which contains the funding info
  •  Clean up the READMEs and remove routes

And, enjoy :)

Usage

Development

Just run and visit http://localhost:3333

npm run dev # SSR development
npm run dev:spa # SPA without SSR

Build

To build the App, run

npm run build

And you will see the generated files in dist, and some of these files will be moved to serverless for deployment.

Deploy on Cloudflare Workers

  1. Create your Cloudflare account.
  2. Install Wrangler CLI.
  3. Modify the account_id in wrangler.toml. Then:
npm run preview # Simulate Worker environment locally
npm run deploy

Why

I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.

So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. (see community maintained variation forks)

Author: frandiox
Source code: https://github.com/frandiox/vitessedge-template
License: MIT license
#vite #vitejs  #vue  #vuejs 

Opinionated Vite Starter Template with SSR in Cloudflare Workers
Meggie Flatley

Meggie Flatley

1656655200

Vitesse Webext: WebExtension Vite Starter Template.

WebExtension Vite Starter

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

Popup

Options Page

Inject Vue App into the Content Script

Features

  • ⚡️ Instant HMR - use Vite on dev (no more refresh!)
  • 🥝 Vue 3 - Composition API, <script setup> syntax and more!
  • 💬 Effortless communications - powered by webext-bridge and VueUse storage
  • 🍃 Windi CSS - on-demand CSS utilities
  • 🦾 TypeScript - type safe
  • 📦 Components auto importing
  • 🌟 Icons - Access to icons from any iconset directly
  • 🖥 Content Script - Use Vue even in content script
  • 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
  • 📃 Dynamic manifest.json with full type support

Pre-packed

WebExtension Libraries

Vite Plugins

Vue Plugins

  • VueUse - collection of useful composition APIs

UI Frameworks

  • Windi CSS - next generation utility-first CSS framework

Coding Style

Dev tools

  • TypeScript
  • pnpm - fast, disk space efficient package manager
  • esno - TypeScript / ESNext node runtime powered by esbuild
  • npm-run-all - Run multiple npm-scripts in parallel or sequential
  • web-ext - Streamlined experience for developing web extensions

Use the Template

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

If you don't have pnpm installed, run: npm install -g pnpm

npx degit antfu/vitesse-webext my-webext
cd my-webext
pnpm i

Usage

Folders

  • src - main source.
    • contentScript - scripts and components to be injected as content_script
    • background - scripts for background.
    • components - auto-imported Vue components that are shared in popup and options page.
    • styles - styles shared in popup and options page
    • assets - assets used in Vue components
    • manifest.ts - manifest for the extension.
  • extension - extension package root.
    • assets - static assets (mainly for manifest.json).
    • dist - built files, also serve stub entry for Vite on development.
  • scripts - development and bundling helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder.

For Firefox developers, you can run the following command instead:

pnpm start:firefox

web-ext auto reload the extension when extension/ files changed.

While Vite handles HMR automatically in the most of the case, Extensions Reloader is still recommanded for cleaner hard reloading.

Build

To build the extension, run

pnpm build

And then pack files under extension, you can upload extension.crx or extension.xpi to appropriate extension store.

Credits

This template is originally made for the volta.net browser extension.

Variations

This is a variant of Vitesse, check out the full variations list.

Author: antfu
Source code: https://github.com/antfu/vitesse-webext
License: MIT license

#vite #vue #vitejs #vuejs 

Vitesse Webext: WebExtension Vite Starter Template.
Meggie Flatley

Meggie Flatley

1656637200

Vitesome: A Simple Opinionated Vue3 Starter Template with Vite.js

Logo created with Windcss logo + Icons made by Vectors Market & Pixel perfect from www.flaticon.com 

Vitesome 🌬 ⛵️

A simple opinionated Vue Starter Template with Vite.js

This template should help get you started developing with Vue and Typescript in Vite in a bliss.

Features

Live Demo

 

You can help me keep working on this project 💚

Generous Unicorns 🦄 

Pre-📦

This repo brings few things pre-packed, so you don't need to install them manually everytime.

Styling

  • UnoCSS with The instant on-demand Atomic CSS engine.

Icons

Plugins

Dev tools

Check it out

You can create a repo with this template here

Or if you prefer to do it manually with the cleaner git history

npx degit alvarosabu/vitesome my-vitesome-app
cd my-vitesome-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Project setup

yarn

Use it

yarn dev

This will serve the app at http://localhost:3260

Build it

yarn build

Builds the app for production to the dist folder.
It correctly bundles Vue in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Deployment

Visit Netlify and select your repo, select OK along the way, and your App will be live in a minute.

Recommended IDE Setup

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can use the following:

If Using Vetur

  1. Install and add @vuedx/typescript-plugin-vue to the plugins section in tsconfig.json
  2. Delete src/shims-vue.d.ts as it is no longer needed to provide module info to Typescript
  3. Open src/main.ts in VSCode
  4. Open the VSCode command palette
  5. Search and run "Select TypeScript version" -> "Use workspace version"

Author: alvarosabu
Source code: https://github.com/alvarosabu/vitesome
License: MIT license

#vue #vuejs #vite #vitejs 

Vitesome: A Simple Opinionated Vue3 Starter Template with Vite.js
Meggie Flatley

Meggie Flatley

1656626400

Use Vue3, Typescript and Vant To Develop Mobile Applications in Vite

vue-vite-h5

This template should help get you started developing mobile applications with Vue3 and Typescript and Vant in Vite.

Project setup

yarn install

Compiles and hot-reloads for development

yarn start

Compiles and minifies for production

yarn build

Lints and fixes files (eslint + prettier)

yarn lint

Generate component(page) templates for development

yarn generate

Customize configuration

See Configuration Reference.

Browser adaptation

Rem Unit (default)

Vant uses px unit by default,You can use tools such as postcss-pxtorem to transform px unit to rem unit.

PostCSS Config

PostCSS config example:

// .postcssrc.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

Viewport Units

you can use tools such as postcss--px-to-viewport to transform px unit to viewport units (vw, vh, vmin, vmax).

PostCSS Config

PostCSS config example:

// .postcssrc.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

Custom rootValue

If the size of the design draft is 750 or other sizes, you can adjust the rootValue to:

// .postcssrc.js
module.exports = {
  plugins: {
    // postcss-pxtorem version >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

Recommended IDE Setup

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from VSCode command palette.

Author: LZHD
Source code: https://github.com/LZHD/vue-vite-h5
License: MIT license

#typescript #vue #vitejs #vuejs 

Use Vue3, Typescript and Vant To Develop Mobile Applications in Vite
Meggie Flatley

Meggie Flatley

1656615600

Vite Tauri: Tauri, Vite, Vue 3, Vuetify 3 Desktop App Template

Vite Tauri Template

This is a starter template for those who want to make a desktop application with web technologies. This template uses the below stack.

Vite.js

Vite.js is a new modern bundler for javascript which is blazing fast and includes many sensible defaults.

Tauri

Tauri is a new modern technology to turn your web apps into a desktop app for multiple platforms (Windows, MacOS, Linux, android and ios soon). Tauri apps have very small file size and tiny memory consumption.

Vue 3

Vue.js is an incremental frontend framework which is an absolute joy to work with. It has seen very impressive improvements in version 3 including Composition Api, script setup, dynamic css binding and ... .

Vuetify 3

Vuetify is arguably the best component library for Vue 3 and is currently in alpha stage but will soon be ready for production. Lots of premade components will make your job as application developer easier and more fun.

Bonus: Vue Global Api

Vue Global Api globally registers commonly used composition api functions such as ref, reactive and ... . makes your script setup sections cleaner.

Installation

Ready your workspace according to tauri. Tauri Getting Started

  • Note: You only need to install global things such as rust and other os level packages. Any thing related to application itself is already installed and ready for you.

Clone repository git clone https://github.com/yooneskh/vite-tauri-template app-name

yarn or npm i

Modify these files according to your app.

  • index.html
  • package.json
  • public/favicon.ico
  • src/assets/logo.*
  • src-tauri/tauri.conf.json

Usage

yarn serve launches vite and you can test and develop your app in the browser at http://localhost:8080.

yarn serve:native launches vite and configures ynetwork to use tauri for api calls. Use this if you want to test your app in tauri dev mode.

yarn serve:tauri launches tauri in dev mode and you can see your app in tauri window.

yarn build builds web application and packages them with tauri in src-tauri/target

yarn build:web only builds the web application and puts it in ./dist directory. You should not normally want this. Difference of this web app with the one build with normal yarn build is that this one uses axios for network calls.

Author: yooneskh
Source code: https://github.com/yooneskh/vite-tauri-template
License:

#vue #vuejs #vite #vitejs 

Vite Tauri: Tauri, Vite, Vue 3, Vuetify 3 Desktop App Template
Meggie Flatley

Meggie Flatley

1656604800

NeuVite: Starter Template for Neutralino.js with Vite.js and Vue.js

Neutralino.js Template With Vite.js and Vue.js

Neutralino.js

Neutralino.js is a new competitor to Electron.js which is smaller and consumes tiny amount of ram.

Vite.js

Vite.js is the new generation of build tools which loads up extremely fast and provides a lot out of the box.

Vue.js

Vue.js is one of the newest javascript frameworks with extremely lean leanring curve and very fun to work with. Has become exceptionally better in version 3. This template uses Vue.js version 3

This template brings all these together and gives you the starting point to make top notch desktop apps.

Installation

  • Clone this repository
  • cd into the directory
  • yarn
  • npx neu update
  • change these things according to your app
    • name and description in package.json
    • applicationId, modes.window.title and cli.binaryName in neutralino.config.js
    • title tag in index.html
    • public/favicon.ico
    • public/icons/appIcon.png

Usage

  • yarn serve starts the dev server of vite in 8080 port. (you can change it in the vite.config.js)
  • develop your application in src
  • yarn serve:neu builds your app and opens it in the neu window.
  • after you are done, yarn build build the js app and packages it with neu
  • your app binaries are at dist

Upcoming

  • Run dev server directly in Neutralino.js window (Vite.js must some how build on every change and then neu listen)

Author: yooneskh
Source code: https://github.com/yooneskh/vite-neutralinojs-template
License:

#vite #vitejs #vue #vuejs 

NeuVite: Starter Template for Neutralino.js with Vite.js and Vue.js
Meggie Flatley

Meggie Flatley

1656594000

Vivu: Opinionated Scalable Vue Boilerplate using Vite

Vivu 

Opinionated scalable vue boilerplate using vite

Design Pattern

Learn the design pattern here

Features

Dev Tools

Requirement

Getting Started

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

# clone repository
$ git clone https://github.com/logustra/vivu.git

# open folder vivu
$ cd vivu

# install packages
$ pnpm install

# build and serve with vite dev server
$ pnpm dev

Run with Docker

# build docker image and tag it with name nginx
$ docker build . -t nginx

# run docker image nginx with name vivu in port 9900
$ docker run -it -p 9900:80 --rm --name vivu nginx

Checklist

When you use this template, try follow the checklist to update your info properly

  •  Change name, description, repository, bugs field in package.json
  •  Change the author name in LICENSE
  •  Change the site in .vitebook/config.ts
  •  Change the favicon in public
  •  Remove the .github folder which contains the funding info
  •  Clean up the README(s) and remove modules

And, enjoy :)

How to Create Folder

A guide how to create a folder using create-cli

Component

# create new atom component with name loading
$ node create component atoms loading

Module

# create new module with name home and with all types
$ node create module home all

Cheer me on

If you like my works, you can cheer me on here 😆

    🇮🇩 Trakteer
    🌍 Ko-Fi

Author: logustra
Source code: https://github.com/logustra/vivu
License: MIT license

#vite #vue #vitejs 

Vivu: Opinionated Scalable Vue Boilerplate using Vite