Eleventy Plugin Vue

screenshot of Eleventy Plugin Vue
eleventy
vue

Eleventy Plugin Vue

Use Vue.js templates and Vue.js single file components in Eleventy.

Overview

The eleventy-plugin-vue is a plugin for Vue 3 that adds Single File Component (SFC) support to Eleventy. It allows Eleventy to process .vue SFC files as templates and output server-rendered components with zero-bundle size. This plugin aims to provide a seamless integration between Eleventy and Vue, making it a powerful combination for building websites.

Features

  • Builds *.vue Single File Components in both the input directory and Eleventy's includes directory.
  • Works with Vue's Single File Components, including scoped CSS.
  • Data from SFC files feeds into the data cascade, similar to front matter.
  • All JavaScript Template Functions, Universal Filters, Universal Shortcodes, and Universal Paired Shortcodes are available as Vue methods.
  • Eleventy supplied data is available globally in all components.

Installation

To install the eleventy-plugin-vue, follow these steps:

  1. Ensure that you have Eleventy 1.0.0 or newer if you're using version 1.x of the plugin.
  2. If you're using version 0.2.x, it is encouraged to use Eleventy 0.11.1 or newer for incremental Vue component builds.
  3. If you're still using version 0.1.x, make sure you have Eleventy 0.11.0 or newer.

Summary

The eleventy-plugin-vue is a plugin for Vue 3 that adds SFC support to Eleventy. It allows Eleventy to process .vue SFC files as templates and output zero-bundle size server-rendered components. This plugin provides various features, including support for scoped CSS, data cascade integration, and the availability of JavaScript Template Functions as Vue methods. It is recommended to use the plugin with the appropriate versions of Eleventy for optimal performance and compatibility.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.