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 https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html#SSR-Usage 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.

rollup.config.js

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: [
    commonjs(),
    vue({
      css: true, // Dynamically inject css as a <style> tag
      compileTemplate: true // Explicitly convert template to render function
    }),
    buble() // Transpile to ES5
  ]
};

wrapper.js


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

const Components = {
  Comp1 ,
  Comp2 
};

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

package.json

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

EDITED

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;