@11ty/eleventy-plugin-vue
Use Vue.js single file components in Eleventy.
Last updated 23 days ago by zachleat .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @11ty/eleventy-plugin-vue 
SYNC missed versions from official npm registry.

eleventy-plugin-vue

⚠️ Work in progress!!

Installation

npm install @11ty/eleventy-plugin-vue
  • 0.0.x requires Eleventy 0.11.0 Beta 2 or above (0.11.0-beta.2)

  • 0.1.x requires Eleventy 0.11.0 Stable or newer (0.11.0)

  • Requires experimental features in Eleventy, specifically: Custom File Extension Handlers feature from Eleventy. Opt in to experimental features on Eleventy by running ELEVENTY_EXPERIMENTAL=true npx @11ty/eleventy.

Changelog

  • 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 but only those outside of the includes directory result in output files.
  • Works with Vue’s Single File Components, including with scoped CSS.
  • Data from single file components 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).
  • page Eleventy supplied data is also available globally in all components.

Not Yet Available

  • Traditional Vue.js “Page templates” (think <!--vue-ssr-outlet-->) as layouts.
    • Note that .vue templates do work as Eleventy layouts, but using traditional Eleventy methods for child content a la v-html="content" instead of <!--vue-ssr-outlet-->.
  • Does not yet embed any client-side JavaScript from inside single file components into the output for use on the client. Any JavaScript embedded there is used only for rendering templates in the build and does not show up in the output.
    • Note that if this is added in the future, it will likely be an opt-in feature.
  • lang on <template>, <style>, or <script> is not yet supported.

Warnings

  • Adding a <!doctype html> to a Vue template is not supported by Vue. For this reason it is recommended to use a different template syntax for your layout (until Vue.js Page Templates support is added per the note above).

Usage

Add to Configuration File

Usually .eleventy.js:

const eleventyVue = require("@11ty/eleventy-plugin-vue");

module.exports = function(eleventyConfig) {
  // Use Defaults
  eleventyConfig.addPlugin(eleventyVue);
};

Customize with Options

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/",

    // Use postcss in the single file components
    rollupPluginVueOptions: {
      style: {
        postcssPlugins: [
          require("autoprefixer"),
          require("postcss-nested")
        ]
      }
    }
  });
};

For a full list of rollupPluginVueOptions, see rollup-plugin-vue’s Options.

Advanced: Use with 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
    }
  });
};

Relevant Links

TODO

  • Custom Directives?
  • How to render Vue templates inside of other template files, including Markdown?

Current Tags

  • 0.0.1                                ...           beta (3 months ago)
  • 0.1.1                                ...           latest (23 days ago)

10 Versions

  • 0.1.1                                ...           23 days ago
  • 0.1.0                                ...           23 days ago
  • 0.0.8                                ...           2 months ago
  • 0.0.7                                ...           2 months ago
  • 0.0.6                                ...           2 months ago
  • 0.0.5                                ...           2 months ago
  • 0.0.4                                ...           2 months ago
  • 0.0.3                                ...           2 months ago
  • 0.0.2                                ...           3 months ago
  • 0.0.1                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 10
Last Month 58
Dependencies (9)
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |