Vue Templates Logo Vue Templates
Vitesse Ssr Template screenshot

Vitesse Ssr Template

Author Avatar Theme by Frandiox
Updated: 17 May 2021
191 Stars

Opinionated Vue + Vite Starter Template with SSR in Node.js

Github Live Preview

Categories

Vite

Overview

The Vitesse SSRVue is a template for building Vue 3 applications with server-side rendering (SSR). It is based on @antfu’s Vitesse and uses Vite 2, pnpm, and ESBuild for fast development. The template includes various features such as file-based routing, components auto importing, layout system, support for PWA, Windi CSS for on-demand Tailwind CSS, internationalization (I18n), markdown support, and server-side rendering (SSR) using vite-ssr. It also supports TypeScript and can be deployed on Vercel with minimal configuration.

Features

  • File based routing: Easy routing system based on file structure.
  • Components auto importing: Automatically import components to simplify development.
  • Layout system: Provides a layout system for organizing pages.
  • PWA: Supports Progressive Web App features.
  • Windi CSS: On-demand Tailwind CSS with improved performance.
  • Use icons from any icon sets: Allows the use of icons from various icon sets without any compromise.
  • I18n ready: Internationalization support for multi-language applications.
  • Markdown Support: Built-in support for rendering Markdown content.
  • Server-side rendering (SSR) in Node.js: Server-side rendering support using vite-ssr.
  • TypeScript: Built-in support for TypeScript.
  • Deploy on Vercel: Can be easily deployed on Vercel with minimal configuration.

Installation

To install the Vitesse SSRVue template, follow these steps:

  1. Run the command to create a new project using the template:
npx create-vite@latest my-vue-project --template antfu/vitesse-ssr-vue
  1. Change into the project directory:
cd my-vue-project
  1. Install the dependencies:
pnpm install
  1. Start the development server:
pnpm dev
  1. Access the application in your browser at http://localhost:3333.

Summary

The Vitesse SSRVue is a powerful template for building Vue 3 applications with server-side rendering. It offers a range of features and optimizations to improve development speed and performance. The template includes support for file-based routing, components auto importing, layout system, PWA, Windi CSS, and internationalization. It also supports TypeScript and server-side rendering using vite-ssr. With its ease of installation and the option to deploy on Vercel, the Vitesse SSRVue template provides a solid foundation for building modern Vue applications.