eleventy-plugin-vue

Installation

npm install --save-dev @mvsde/eleventy-plugin-vue

Usage

In your eleventy.config.js or .eleventy.js:

const { pluginVue } = require('@mvsde/eleventy-plugin-vue')

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(pluginVue)
}

This makes Vue 3 Single File Components available as layouts for Eleventy.

The plugin exports additional Composition API methods to get access to the current page’s data and JavaScript shortodes in <script setup>:

<script setup>
import { useData, useMethods, useCSS } from '@mvsde/eleventy-plugin-vue'

// Data supplied by Eleventy and the data cascade
const { page, title, ... } = useData()

// JavaScript shortcodes defined in Eleventy config
const { image,  } = useMethods()

// CSS collected from SFCs
const css = useCSS()
</script>

Acknowledgements

This plugin is inspired by @11ty/eleventy-plugin-vue.