Use Vue.js templates and Vue.js single file components in Eleventy.
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
npm install @11ty/eleventy-plugin-vue
1.x
requires Eleventy 1.0.0
or newer0.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 newer1.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.*.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.scoped
CSS.methods
(global functions to use in templates and child components).
url
Universal Filter like url("/my-url/")
in your Vue templates.page
Eleventy supplied data is also available globally in all components..vue
templates as Eleventy layouts is not yet supported. Subscribe to this issue at #5.lang
on <template>
, <style>
, or <script>
is not yet supported.Usually .eleventy.js
:
const eleventyVue = require("@11ty/eleventy-plugin-vue");
module.exports = function(eleventyConfig) {
// Use Defaults
eleventyConfig.addPlugin(eleventyVue);
};
const eleventyVue = require("@11ty/eleventy-plugin-vue");
module.exports = function(eleventyConfig) {
// OR, Use your own options
eleventyConfig.addPlugin(eleventyVue, {
// Directory to store compiled Vue single file components
cacheDirectory: ".cache/vue/",
// Pass in a file or multiple .vue files to limit compilation
// If this is empty, the plugin will search for all *.vue files
input: [],
// Use postcss in the single file components
rollupPluginVueOptions: {
style: {
postcssPlugins: [
require("autoprefixer"),
require("postcss-nested")
]
}
},
// Passed to rollup.rollup
rollupOptions: {
// Declare your own external dependencies
external: [],
// Use your own Rollup plugins
plugins: [],
},
});
};
For a full list of rollupPluginVueOptions
, see rollup-plugin-vue
’s Options.
eleventy-assets
Compatible with @11ty/eleventy-plugin-vue 0.0.5 and newer.
Eleventy’s Assets plugin lets you manage your own Inline CSS or JavaScript. For the first version of the Eleventy Vue plugin, you can reuse an existing CSS code manager from eleventy-assets
add CSS from your Vue.js Single File Components too.
const eleventyVue = require("@11ty/eleventy-plugin-vue");
const { InlineCodeManager } = require("@11ty/eleventy-assets");
module.exports = function(eleventyConfig) {
let myCssManager = new InlineCodeManager();
eleventyConfig.addPlugin(eleventyVue, {
// Re-use an existing `eleventy-assets` Manager
assets: {
css: myCssManager
}
});
};
Available with Eleventy 1.0+ and Eleventy Vue Plugin 0.6+
Use serverPrefetch
to tell the component to do a few async things before it renders the component.
Below is an example of a Vue template that uses the Eleventy Render Plugin to render Markdown (either in an external file or a string).
<template>
<header v-html="content"/>
</template>
<script>
export default {
async serverPrefetch() {
// let content = await this.renderFile("./_includes/blogpost.md", "md");
this.content = await this.renderTemplate("# Title", "md");
}
}
</script>