Using Eddie with popular frameworks and tools.

Eleventy (Recommended)

Eddie is designed to work beautifully with Eleventy for content-driven sites. This reference website is built with Eleventy.

npm install @11ty/eleventy @brad-frost-web/eddie-web-components @brad-frost-web/eddie-design-tokens

Use Eddie components directly in Nunjucks, Markdown, or HTML templates:

<ed-heading tagName="h1">{{ title }}</ed-heading> <ed-text-passage> {{ content | safe }} </ed-text-passage>

Vanilla HTML

Eddie works out of the box with plain HTML files. Import via ES modules:

<script type="module"> import '@brad-frost-web/eddie-design-tokens/bfw/build/css/tokens.css'; import '@brad-frost-web/eddie-web-components/components/button/button'; </script> <ed-button variant="primary" text="Hello"></ed-button>

Vite Projects

For Vite-based projects, alias the Eddie packages in your vite.config.ts:

export default defineConfig({ resolve: { alias: { '@brad-frost-web/eddie-web-components': path.resolve(__dirname, 'node_modules/@brad-frost-web/eddie-web-components'), '@brad-frost-web/eddie-design-tokens': path.resolve(__dirname, 'node_modules/@brad-frost-web/eddie-design-tokens'), } } });

Nuxt (Complex Apps)

Nuxt is reserved for complex applications that need server-side rendering, complex state management, or backend integration. For most content sites, prefer Eleventy.

Eddie web components work in Nuxt as client-side custom elements. Wrap imports in onMounted() or use dynamic imports with ssr: false.

React / Vue / Svelte

As native web components, Eddie works with any framework. Some notes:

  • React: Use className instead of class. Boolean attributes need explicit values.
  • Vue: Web components work natively. Use v-bind for dynamic properties.
  • Svelte: Web components work out of the box. Import in onMount() for SSR.

For all frameworks, import components in your entry file and use them in templates as regular HTML elements.