eleventy-plugin-vue

eleventy-plugin-vue for Vue 3 ⚡️

Adds Vue Single File Component (SFC) support to Eleventy. Eleventy processes .vue SFC files as Eleventy templates and outputs zero-bundle size server rendered components.

Read more about the goals of this plugin (and a full tutorial!) at Eleventy and Vue, a match made to power Netlify.com

Installation

npm install @11ty/eleventy-plugin-vue

• 1.x requires Eleventy 1.0.0 or newer
• 0.2.x encouraged to use Eleventy 0.11.1 or newer (for incremental Vue component builds)
• 0.1.x requires Eleventy 0.11.0 or newer

Changelog

• 1.0.0 (Milestone) Works with Vue 3. Adds Windows support.
• 0.6.x (Milestone)
• 0.3.1 (Milestone)
• 0.3.0 (Milestone) More consistent incremental builds. Performance improvements.
• 0.2.1 (Milestone) adds incremental builds for Eleventy Vue components to avoid unnecessary repeat work. Fixes bug with permalink strings returned from Vue Single File Component data.
• 0.1.x converted to use a Single File Components for everything (templates, components, etc), instead of 0.0.x’s string templates with front matter.

Features

• Builds *.vue’s Single File Components, both in the input directory and in Eleventy’s includes directory. .vue files in the includes directory are available for import. Same as any Eleventy template syntax, includes do not write files to your output directory.
• Works with Vue’s Single File Components, including with scoped CSS.
• Data from SFC files feeds into the data cascade (similar to front matter)
• All JavaScript Template Functions (see https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions), Universal Filters, Universal Shortcodes, Universal Paired Shortcodes are available as Vue methods (global functions to use in templates and child components).
  • For example, you can use the url Universal Filter like url("/my-url/") in your Vue templates.
• page Eleventy supplied data is also available globally in all components.

Not Yet Available

• Using .vue templates as Eleventy layouts is not yet supported. Subscribe to this issue at #5.
• Does not yet embed any client-side JavaScript from inside single file components into the output for use on the client.
• lang on , , or `