eleventy-plugin-vue

Installation

npm install --save-dev github:BigFly3/eleventy-plugin-vue

Usage

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

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

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(pluginVue, {
		rollupOptions: {
			plugins: [
				alias({
					entries: [
						{ find: '@', replacement: process.cwd() },
						{
							find: '@project',
							replacement: path.resolve(process.cwd(), 'project')
						}
					]
				})
			]
		}
	})
}

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.