Use ~ in `import` urls as project or include root

[zachleat]

Probably something like

• https://github.com/rollup/plugins/tree/master/packages/alias example on https://github.com/rollup/rollup/issues/558#issuecomment-658124239
• https://www.npmjs.com/package/rollup-plugin-root-import https://github.com/mixmaxhq/rollup-plugin-root-import
• https://www.npmjs.com/package/rollup-plugin-includepaths

Maybe also look at https://github.com/rollup/plugins/tree/master/packages/auto-install

[zachleat]

This is the thing! https://twitter.com/_ovlb/status/1479539567577473029

https://github.com/inframanufaktur/no-11/blob/main/_plugins/vue.js

const path = require('path')
const eleventyVue = require('@11ty/eleventy-plugin-vue')
const alias = require('@rollup/plugin-alias')

module.exports = {
  plugin: eleventyVue,
  pluginOptions: {
    rollupOptions: {
      plugins: [
        alias({
          entries: [
            {
              find: '~components',
              replacement: path.join(
                process.cwd(),
                '_src/_includes/components',
              ),
            },
          ],
        }),
      ],
    },
  },
}

[zachleat]

Note that the master branch holds the 1.x canary versions of this plugin (Vue 3) and 0.x branch is Vue 2.

• 1.x has access to rollupOptions and can use rollup plugins. https://github.com/11ty/eleventy-plugin-vue#customize-with-options
• 0.x does not and can’t use rollup plugins (yet?) https://github.com/11ty/eleventy-plugin-vue/tree/0.x#customize-with-options

[zachleat]

⚠️ EDIT WARNING ⚠️ Don’t use this code sample, it causes second build errors. Use this one instead: https://github.com/11ty/eleventy-plugin-vue/issues/7#issuecomment-1113550527

Here’s the sample I got working on 1.x:

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

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyVue, {
    rollupOptions: {
      plugins: [
        alias({
          entries: [
            {
              find: /^\~components\/(.*)/,
              replacement: './_includes/$1',
            },
          ],
        }),
      ],
    },
  });
};

and import include from "~components/include.vue";

[zachleat]

Eleventy Plugin Vue 0.7.3 is out which includes support for rollupOptions—thank you @hexagoncircle!

[zachleat]

One caveat I found here, if you’re running into File not processed yet issues:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] File not processed yet, /Users/zachleat/Temp/eleventy-vue-aliases/_includes/include.vue (via Error)
[11ty] 
[11ty] Original error stack trace: Error: File not processed yet, /Users/zachleat/Temp/eleventy-vue-aliases/_includes/include.vue
[11ty]     at resolveVuePart (/Users/zachleat/Temp/eleventy-vue-aliases/node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.js:92:15)
[11ty]     at Object.resolveId (/Users/zachleat/Temp/eleventy-vue-aliases/node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.js:217:33)
[11ty]     at /Users/zachleat/Temp/eleventy-vue-aliases/node_modules/rollup/dist/shared/rollup.js:22823:37
[11ty] Wrote 0 files in 0.04 seconds (v1.0.1)

Make sure you’re returning an absolute path from the aliased replacement. This works better:

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

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyVue, {
    rollupOptions: {
      plugins: [
        alias({
          entries: [
            {
              find: "~components",
              replacement: path.join(process.cwd(), '/_includes/'),
            },
          ],
        }),
      ],
    },
  });
};

with import include from "~components/include.vue";