If you want to import your Vue components in the following way, so without a .vue or .js extension: import CrazyComponent from '@/components/CrazyComponent'; // instead of import CrazyComponent from '@/components/CrazyComponent.vue'; There are some things you have to configure. I will outline these things below: Rollup Add the following to your rollup.config.js: nodeResolve({ browser: true, jsnext: true, main: true, extensions: ['.js', '.vue'] }), ESLint Add the following to your eslintrc.

I don’t like to do relative imports like this: import CrazyComponent from "../../components/CrazyComponent"; Instead, I like to import my components (stores, helpers, models, etc.) like this: import CrazyComponent from "@/components/CrazyComponent"; You might want to configure some stuff to make this possible. I will outline these configurations below: ESLint First, install eslint-import-resolver-custom-alias: npm install eslint-import-resolver-custom-alias --save-dev In your eslintrc.js or the eslintConfig section in your package.json, add the following resolver under "import/resolver".