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".

tl;dr - A vue.js example of adding dark mode support to your website that takes system preference and user preference into account. See link image/svg+xml for source. When you are developing a website with dark-mode support, there are usually two paths you can take: Use the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS media feature and thereby use the system preference. Use a website setting to set a .