Vitessedge Template

Theme by Frandiox

|

Updated: 31 Dec 2021

|

158 Stars

Opinionated Vite Starter Template with SSR in Cloudflare Workers

Categories

Overview

The VitessedgeVue is a template for Vue 3 and Vite 2 applications that includes several key features such as Vue 3 and Vite 2 support, edge-side rendering in Cloudflare Workers, file-based routing, components auto-importing, layout system, PWA support, Windi CSS for on-demand Tailwind CSS, internationalization readiness, markdown support, and TypeScript integration. It also provides easy deployment on Cloudflare Workers with minimal setup required.

Features

• Fast Performance: Built with Vue 3, Vite 2, and ESBuild, the template prioritizes speed and efficiency.
• Edge-side Rendering: Utilizes Vitedge and Cloudflare Workers for edge-side rendering, with edge cache and HTTP/2 server push for accelerated content delivery.
• File-based Routing: Implements a file-based routing system for easy navigation and organization.
• Components Auto-importing: Automates the importing of components, reducing manual import statements.
• Layout System: Includes a layout system that allows for efficient structuring of pages.
• PWA Support: Provides progressive web app support for enhanced user experience and offline functionality.
• Windi CSS: Uses Windi CSS, an on-demand Tailwind CSS solution, for lightweight and speedy styling.
• Icon Integration: Allows the use of icons from any icon set with no compromise on performance.
• Internationalization: Offers support for internationalization with different routes for each language.
• Markdown Support: Includes markdown support for easy integration of markdown content.
• TypeScript Integration: Supports TypeScript for type-safe development.
• Cloudflare Workers Deployment: Provides easy deployment on Cloudflare Workers with minimal setup required.

Installation

To install the VitessedgeVue template, follow these steps:

1. Create a repo from this template on GitHub or clone it to your local machine.
2. If using the GitHub template, rename the name field in the package.json file to your desired project name.
3. Change the author name in the LICENSE file to your own.
4. Modify the title in the index.html file to match your project.
5. Replace the favicon in the public folder with your own icon.
6. Remove the .github folder, which contains funding information that may not be relevant to your project.
7. Clean up the READMEs and remove any irrelevant routes.
8. Run the development server by executing the command npm run dev and visit http://localhost:3333 in your browser.

To build the app, run npm run build, and the generated files will be located in the dist folder. Some of these files can be moved to a serverless environment for deployment.

For deployment on Cloudflare Workers, follow these additional steps:

1. Create a Cloudflare account if you don’t already have one.
2. Install the Wrangler CLI, which is used to interact with Cloudflare Workers.
3. Modify the account_id field in the wrangler.toml file to match your Cloudflare account ID.
4. Execute the command wrangler publish to deploy the app on Cloudflare Workers.

Summary

The VitessedgeVue template is a feature-rich solution for developing Vue 3 and Vite 2 applications. It includes a wide range of functionalities such as fast performance, edge-side rendering, file-based routing, automatic component importing, a layout system, PWA support, Windi CSS integration, icon integration, internationalization readiness, markdown support, and TypeScript integration. With its easy deployment on Cloudflare Workers, the template offers developers a convenient and efficient development experience.