Eleventy Plugin Vue

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.