2021-12-22
1741
#vue
Anthony Gore
83691
Dec 22, 2021 â‹… 6 min read

Building a Vue 3 component library

Anthony Gore I'm Anthony Gore, a frontend web developer from Sydney, Australia. I curate the weekly Vue.js Developers Newsletter and blog frequently on interesting web development topics.

Recent posts:

Fix over-caching with dynamic IO caching in Next.js 15

Next.js 15 caching overhaul: Fix overcaching with Dynamic IO and the use cache directive.

David Omotayo
Aug 6, 2025 â‹… 10 min read
LLMs are facing a QA crisis here’s how we could solve it

LLMs are facing a QA crisis: Here’s how we could solve it

LLM QA isn’t just a tooling gap — it’s a fundamental shift in how we think about software reliability.

Rosario De Chiara
Aug 4, 2025 â‹… 7 min read

Windsurf vs. Cursor: When to choose the challenger

Windsurf AI brings agentic coding and terminal control right into your IDE. We compare it to Cursor, explore its features, and build a real frontend project.

Chizaram Ken
Jul 31, 2025 â‹… 9 min read

The CSS if() function: Conditional styling will never be the same

The CSS Working Group has approved the if() function for development, a feature that promises to bring true conditional styling directly to our stylesheets.

Ikeh Akinyemi
Jul 30, 2025 â‹… 12 min read
View all posts

9 Replies to "Building a Vue 3 component library"

  1. Thanks for sharing, I’ve followed the instructions, but am hitting a “Error: Could not resolve ‘./components’ from src/index.js” when running the `npm run build` command. The ‘/components/’ folder is definitely there.

    If I change the import to “import components from ‘@src/components’ then the build works correctly, however the module then complains, saying “Cannot find module ‘@src/components'” when used as an npm module in a Vue project.

    Any help/advice would be appreciated.

  2. Hello, I am trying to follow your guide. I am encountering an error when trying to build. I have not gotten to publishing yet. It says, “SyntaxError: Cannot use import statement outside a module.” I’ve read some posts suggesting using “type”: “module” but your package.json does not use this. Any advice?

    1. I added type=module to resolve this

      ”’
      {

      “main”: “index.js”,
      “type”: “module”,

      }

  3. Hi Anthony
    Thanks for sharing. This has helped me a lot on something that I currently working
    But I have a problem, I’m working with script setup and because of that I don’t have access to name, inheritAttrs, etc.
    How can I do the iteration through the list of components exported on index.js file?
    For now I added an extra script block where I set the same, but as you can image this is a hackish solution and would like to use on the final product.
    Thanks

  4. this is a really great source. Thanks for this!
    If I want to import the components individually in my project files (ie. import InputText from ‘my-package’) what do I need to do? I tried to add it to the files white-list but no luck

  5. I don’t suppose you could give a little more detail on the vuepress section? I followed the instructions but all I get running the docs server is the 404 page

Leave a Reply