{"id":13493714,"url":"https://github.com/11ty/eleventy-plugin-vue","last_synced_at":"2025-04-07T07:01:36.050Z","repository":{"id":41357865,"uuid":"248571381","full_name":"11ty/eleventy-plugin-vue","owner":"11ty","description":"Use Vue.js templates and Vue.js single file components in Eleventy.","archived":false,"fork":false,"pushed_at":"2023-03-17T20:48:12.000Z","size":127,"stargazers_count":196,"open_issues_count":17,"forks_count":11,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-29T15:44:51.016Z","etag":null,"topics":["eleventy","eleventy-plugin","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/11ty.png","metadata":{"funding":{"open_collective":"11ty"},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-03-19T18:02:30.000Z","updated_at":"2024-10-15T01:44:52.000Z","dependencies_parsed_at":"2023-09-23T14:40:43.250Z","dependency_job_id":null,"html_url":"https://github.com/11ty/eleventy-plugin-vue","commit_stats":{"total_commits":159,"total_committers":3,"mean_commits":53.0,"dds":"0.018867924528301883","last_synced_commit":"0b64bdc7897aeb78a89da1eeecb9a1d5e58f2942"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/11ty%2Feleventy-plugin-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/11ty%2Feleventy-plugin-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/11ty%2Feleventy-plugin-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/11ty%2Feleventy-plugin-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/11ty","download_url":"https://codeload.github.com/11ty/eleventy-plugin-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247465031,"owners_count":20943106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eleventy","eleventy-plugin","vue","vuejs"],"created_at":"2024-07-31T19:01:18.035Z","updated_at":"2025-04-07T07:01:36.011Z","avatar_url":"https://github.com/11ty.png","language":"JavaScript","funding_links":["https://opencollective.com/11ty"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://www.11ty.dev/img/logo-github.svg\" width=\"200\" height=\"200\" alt=\"eleventy Logo\"\u003e\u003c/p\u003e\n\n# eleventy-plugin-vue for Vue 3 🕚⚡️🎈🐀\n\nAdds Vue Single File Component (SFC) support to Eleventy. Eleventy processes `.vue` SFC files as Eleventy templates and outputs zero-bundle size server rendered components.\n\nRead more about the goals of this plugin (and a full tutorial!) at [Eleventy and Vue, a match made to power Netlify.com](https://www.netlify.com/blog/2020/09/18/eleventy-and-vue-a-match-made-to-power-netlify.com/)\n\n## Installation\n\n```sh\nnpm install @11ty/eleventy-plugin-vue\n```\n\n* `1.x` requires Eleventy `1.0.0` or newer\n* `0.2.x` encouraged to use Eleventy `0.11.1` or newer (for incremental Vue component builds)\n* `0.1.x` requires Eleventy `0.11.0` or newer\n\u003c!--\n* `0.0.x` requires Eleventy 0.11.0 Beta 2 or above (`0.11.0-beta.2`)\n--\u003e\n\n### Changelog\n\n* `1.0.0` ([Milestone](https://github.com/11ty/eleventy-plugin-vue/milestone/6?closed=1)) Works with Vue 3. Adds Windows support.\n* `0.6.x` ([Milestone](https://github.com/11ty/eleventy-plugin-vue/milestone/5?closed=1))\n* `0.3.1` ([Milestone](https://github.com/11ty/eleventy-plugin-vue/milestone/4?closed=1))\n* `0.3.0` ([Milestone](https://github.com/11ty/eleventy-plugin-vue/milestone/3?closed=1)) More consistent incremental builds. Performance improvements.\n* `0.2.1` ([Milestone](https://github.com/11ty/eleventy-plugin-vue/milestone/2?closed=1)) adds incremental builds for Eleventy Vue components to avoid unnecessary repeat work. Fixes bug with `permalink` strings returned from Vue Single File Component data.\n* `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.\n\n## Features\n\n* 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.\n* Works with Vue’s Single File Components, including with `scoped` CSS.\n* Data from SFC files feeds into the data cascade (similar to front matter)\n* 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). \n  * For example, you can  use the [`url` Universal Filter](https://www.11ty.dev/docs/filters/url/) like `url(\"/my-url/\")` in your Vue templates.\n* `page` Eleventy supplied data is also available globally in all components.\n\n### Not Yet Available\n\n* Using `.vue` templates as Eleventy layouts is not yet supported. Subscribe to this issue at [#5](https://github.com/11ty/eleventy-plugin-vue/issues/5).\n* Does not yet embed any client-side JavaScript from inside single file components into the output for use on the client.\n* `lang` on `\u003ctemplate\u003e`, `\u003cstyle\u003e`, or `\u003cscript\u003e` is not yet supported.\n\n## Usage\n\n### Add to Configuration File\n\nUsually `.eleventy.js`:\n\n```js\nconst eleventyVue = require(\"@11ty/eleventy-plugin-vue\");\n\nmodule.exports = function(eleventyConfig) {\n  // Use Defaults\n  eleventyConfig.addPlugin(eleventyVue);\n};\n```\n\n#### Customize with Options\n\n```js\nconst eleventyVue = require(\"@11ty/eleventy-plugin-vue\");\n\nmodule.exports = function(eleventyConfig) {\n  // OR, Use your own options\n  eleventyConfig.addPlugin(eleventyVue, {\n    // Directory to store compiled Vue single file components\n    cacheDirectory: \".cache/vue/\",\n\n    // Pass in a file or multiple .vue files to limit compilation\n    // If this is empty, the plugin will search for all *.vue files\n    input: [],\n\n    // Use postcss in the single file components\n    rollupPluginVueOptions: {\n      style: {\n        postcssPlugins: [\n          require(\"autoprefixer\"),\n          require(\"postcss-nested\")\n        ]\n      }\n    },\n\n    // Passed to rollup.rollup\n    rollupOptions: {\n      // Declare your own external dependencies\n      external: [],\n\n      // Use your own Rollup plugins\n      plugins: [],\n    },\n  });\n};\n```\n\nFor a full list of `rollupPluginVueOptions`, see [`rollup-plugin-vue`’s Options](https://rollup-plugin-vue.vuejs.org/options.html#include).\n\n#### Advanced: Use with `eleventy-assets`\n\n_Compatible with @11ty/eleventy-plugin-vue 0.0.5 and newer._\n\n[Eleventy’s Assets plugin](https://github.com/11ty/eleventy-assets) 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.\n\n```js\nconst eleventyVue = require(\"@11ty/eleventy-plugin-vue\");\nconst { InlineCodeManager } = require(\"@11ty/eleventy-assets\");\n\nmodule.exports = function(eleventyConfig) {\n  let myCssManager = new InlineCodeManager();\n\n  eleventyConfig.addPlugin(eleventyVue, {\n    // Re-use an existing `eleventy-assets` Manager\n    assets: {\n      css: myCssManager\n    }\n  });\n};\n```\n\n#### Advanced: Run async things before component render\n\n_Available with Eleventy 1.0+ and Eleventy Vue Plugin 0.6+_\n\nUse [`serverPrefetch`](https://ssr.vuejs.org/guide/data.html) to tell the component to do a few async things before it renders the component.\n\nBelow is an example of a Vue template that uses [the Eleventy Render Plugin](https://11ty.dev/docs/plugins/render/) to render Markdown (either in an external file or a string).\n\n```html\n\u003ctemplate\u003e\n  \u003cheader v-html=\"content\"/\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  async serverPrefetch() {\n    // let content = await this.renderFile(\"./_includes/blogpost.md\", \"md\");\n    this.content = await this.renderTemplate(\"# Title\", \"md\");\n  }\n}\n\u003c/script\u003e\n```\n\n\u003c!-- ## Relevant Links\n\n* https://ssr.vuejs.org/\n* https://vuejs.org/v2/guide/single-file-components.html\n* https://vue-loader.vuejs.org/guide/scoped-css.html\n* https://rollup-plugin-vue.vuejs.org/\n* https://rollupjs.org/guide/en/ --\u003e\n\u003c!-- https://github.com/tj/consolidate.js/ --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F11ty%2Feleventy-plugin-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F11ty%2Feleventy-plugin-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F11ty%2Feleventy-plugin-vue/lists"}