Import and use only one component from an existing package - possible?

Hey guys,

I recently came across the Element Plus Vue 3 component library.

While I believe it's a fantastic resource, I need only a specific component to use in a personal project. I'm referring to the Image Component.

Is it possible somehow to just import the Image component along with its dependencies, and make use of it, without importing the whole library?

Thanks.

DanielRønfeldt

3 years ago

Level 10

It turns out that nothing bad happens if you install the library and then simply import the necessary component(s) into your project.

LE: in order to prevent your existing classes from being overwritten by Element Plus ones, just import the library's CSS before your project's main styles.

SDCODE

3 years ago

Best Answer

Level 1

Install the Element Plus library as a dependency in your project:

npm install element-plus --save

Import the Image component and its dependencies in your Vue component:

import { defineComponent } from 'vue';
import { ElImage, ElLoading, ElMessageBox } from 'element-plus';
import 'element-plus/lib/theme-chalk/el-image.css';
import 'element-plus/lib/theme-chalk/el-loading.css';
import 'element-plus/lib/theme-chalk/el-message-box.css';

export default defineComponent({
  components: {
    ElImage,
    ElLoading,
    ElMessageBox,
  },
  // ...
});

Here, we've imported the Image component, as well as its dependencies (Loading and MessageBox), and their respective CSS files. Use the Image component in your Vue template:

<template>
  <div>
    <el-image
      src="https://picsum.photos/200/300"
      fit="cover"
      style="width: 200px; height: 300px;"
    />
  </div>
</template>

Here, we've used the Image component with its src and fit props, and set its style with CSS.

1 like

DanielRønfeldt

3 years ago

Level 10

@SDCODE great solution, thanks!

Please or to participate in this conversation.