Vue npm package named import

Hey, so I’m trying to create a vue npm package that contains vue components that I created.
I’m following this guide and it says I can use the sfc file directly by having
"browser": { "./sfc": "src/my-component.vue" },

But when I try the import it like this
import { Comp1 ] from '@frontend/components/sfc'; in my other it says This dependency was not found:.

This is my config.


import commonjs from 'rollup-plugin-commonjs'; // Convert CommonJS modules to ES6
import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
import buble from 'rollup-plugin-buble'; // Transpile/polyfill with reasonable browser support
export default {
  input: 'src/components/wrapper.js', // Path relative to package.json
  output: {
    name: 'Components',
    exports: 'named'
  plugins: [
      css: true, // Dynamically inject css as a <style> tag
      compileTemplate: true // Explicitly convert template to render function
    buble() // Transpile to ES5


import Comp1 from '../components/Comp1 .vue';
import Comp2 from '../components/Comp2 .vue';

const Components = {
  Comp1 ,

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
export default Components;


  "browser": {
    "./sfc": "src/components"
  "scripts": {
    "build-bundle": "rollup --config ./rollup.config.js --format umd --file dist/widget-components.js",
    "lint": "vue-cli-service lint"
  "files": [


What I really want is named import. Since i’m building a lot of components I want to be able to only import some and not the whole lib. Is that possible?

1 Like

Instead of export default, use export.

export Components;