Vue Templates Logo Vue Templates
Vue Rollup Boilerplate screenshot

Vue Rollup Boilerplate

Author Avatar Theme by Dangvanthanh
Updated: 31 Dec 2024
121 Stars

A simple rollup, vue-loader and esbuild setup for quick prototyping.

Github Live Preview

Overview

Vue Rollup Boilerplate is a simple setup that combines Rollup, vue-loader, and esbuild for quick prototyping. It provides support for Vue 2 and offers an alternative option for Vue 3 with Vite. The boilerplate also includes additional features such as using unplugin-vue2-script-setup to bring <script setup> to Vue 2, Rollup Plugin Visualizer to visualize and analyze the bundle, and various components using the atomic design pattern.

Features

  • Rollup: A bundler that packages JavaScript modules into a single file.
  • PostCSS: A plugin for processing CSS with JavaScript.
  • ESBuild: A fast JavaScript bundler and minifier.
  • Prettier: An opinionated code formatter for JavaScript.
  • Components: Atomic design components including atoms, molecules, organisms, templates, and pages.
  • Makefile and PNPM: Tools for automating tasks and managing packages with PNPM as package manager.

Installation

Prerequisites

  • Make sure you have Node.js installed on your system.

Steps

  1. Clone the repository:
git clone <repository_url>
  1. Change into the project directory:
cd <project_directory>
  1. Install the dependencies using PNPM:
pnpm install

Summary

Vue Rollup Boilerplate is a convenient setup for Vue.js development that combines Rollup, vue-loader, and esbuild. It offers support for Vue 2 and provides additional features such as the ability to bring <script setup> to Vue 2 using unplugin-vue2-script-setup and visualizing the bundle with Rollup Plugin Visualizer. The boilerplate also includes a variety of atomic design components and utilizes Makefile and PNPM for task automation and package management. Overall, Vue Rollup Boilerplate is a useful starting point for quick prototyping in Vue.js.