Hello from a Vue component.
Hello from Vue.
Hello from Eleventy.
``` 4. Run Eleventy! ``` ELEVENTY_EXPERIMENTAL=true npx @11ty/eleventy --serve ``` _The ability to add Vue and in fact _any_ templating language to Eleventy is currently available as an experimental feature in `v0.11.0` and APIs specific to that feature may be subject to change. To run Eleventy with experimental features, we’re using the `ELEVENTY_EXPERIMENTAL=true` environment variable. Look for more of these plugins to come from the lovely Eleventy community! I’ve seen some early drafts of plugins of Eleventy with Svelte and Eleventy with React that look very promising._ 5. View your page in a browser, navigate to `http://localhost:8080/` (which is the same as `http://localhost:8080/index.html`—`index.html` written from our `index.vue` file above is implied). Double check your console output to make sure `8080` is the right port—it will increment to `8081` or higher when `8080` is already in use by something else. ### Side Quest: Adding a Doctype A consistent problem with full stack Vue: how to add a Doctype? We love Vue because it’s markup driven but Doctypes are a special case necessary for proper document rendering. Nuxt solves this problem with their special [App Template View](https://nuxtjs.org/guide/views/#app-template). #### Option 1: Using a Layout Template You can also do this same thing with a [Layout template](https://www.11ty.dev/docs/layouts/) in Eleventy. Create a `_includes/layout.html` file with the following content: ``` {% raw %}{{ content }}{% endraw %} ``` And then add the layout reference to our `index.vue` template file: ``` ``` _Side Side Quest:_ You could also declare a global layout for all templates by creating a global data file `_data/layout.js` with the content `module.exports = "layout.html"`. Read more about [Eleventy’s Data Cascade](https://www.11ty.dev/docs/data-cascade/) to learn about how that works. _Important note:_ While front matter is not supported in Vue component files, the [`data` provided from Vue template files](https://vuejs.org/v2/guide/components.html#Base-Example) feeds into the [Eleventy Data Cascade](https://www.11ty.dev/docs/data-cascade/) at the same level as front matter. #### Option 2: Using a Transform Arguably, it may be simpler to add the Doctype via an [Eleventy Transform](https://www.11ty.dev/docs/config/#transforms). Transforms allow you to post-process the output of an Eleventy template before it writes to the file system. The following code would add a Doctype if one didn’t already exist (add it to your `.eleventy.js` configuration file): ``` eleventyConfig.addTransform("add-html-doctype", (content, outputPath) => { let doctype = ""; // If we’re writing to an HTML file and a Doctype does not already exist if(outputPath.endsWith(".html") && !content.trim().toLowerCase().startsWith(doctype)) { return `${doctype}${content}`; } return content;}); ``` ### Add Components! Now we’re ready to add some more Vue Single File Components to our stack—let’s do it! If we want a `.vue` source file to output a full HTML file in the Eleventy output folder (`_site` by default), then we can create any old `.vue` file in our root folder (we called it `eleventy-vue-demo` above). If we only want to consume these components in other higher level templates, the most straightforward way to do this is to put your components into the `_includes/` folder. Files in `_includes` are already exempted from writing to output directory. Let’s create `_includes/room-with-a.vue`: ```Hello from a Vue component.