We Keep Coding

Add element-ui components to element plus in main.js vue 3

I'm trying to figure out how to change elementu-ui components to element-plus. Part of my migration from vue 2 to vue 3. I find the documentation isn't clear how to register components in vue 3 in the main.js file.
This is the error I get
"export 'Tree' was not found in 'element-plus'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
Here's my main.js file
import Vue, { createApp, h } from 'vue'
import Vue, { createApp, h } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import {
Button,
Select,
Option,
Dropdown,
TableColumn,
Checkbox,
Badge,
Divider,
Tag,
DropdownItem,
Pagination,
Table,
DropdownMenu,
Tree,
Tooltip,
} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/en'
import locale from 'element-plus/lib/locale'
const getCookieConsent = localStorage.getItem('Cookie acceptance')
if (typeof getCookieConsent !== 'undefined' && getCookieConsent === 'true') {
FullStory.init({ orgId: '14C6AX' })
Vue.prototype.$FullStory = FullStory
}
locale.use(lang)
Vue.component(Tree.name, Tree)
Vue.component(Button.name, Button)
Vue.component(Divider.name, Divider)
Vue.component(Checkbox.name, Checkbox)
Vue.component(Pagination.name, Pagination)
Vue.component(Tag.name, Tag)
Vue.component(Badge.name, Badge)
Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Select.name, Select)
Vue.component(Dropdown.name, Dropdown)
Vue.component(DropdownItem.name, DropdownItem)
Vue.component(DropdownMenu.name, DropdownMenu)
Vue.component(Tooltip.name, Tooltip)
Vue.component(Option.name, Option)
createApp({
render: () => h(App)
}).use(router).use(store).mount('#app')

In Vue 3, it is not possible (or at least it shouldn't be done that way) to register components globally. You have to create a Vue app using createApp, and then register components for this app.
Also, the element-plus documentation explains everything you need to know to import their components.
// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// Create your Vue 3 app
const app = createApp(App)
// Choice #1: register all components. Impacts global bundle size
app.use(ElementPlus, {
// options
})
app.mount('#app')
If you want to use treeshaking, just import the components when you need them:
// my-component.vue
// Choice #2: import and register components as you need them
import { ElTree } from 'element-plus'
export default {
components: {
ElTree
}
}
Try to import all components with the prefix El, they are exported this way apparently.

I update my package and the previous code not work any more. At last I modified some code and it works.
1, vite.config.js remove
{
libraryName: 'element-plus',
libraryDirectory: 'es',
style(name) {
return `element-plus/theme-chalk/${name}.css`;
},
}
])
2, main.js the past use(component) to remove. Change to:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus, {
// options
})
app.component("ElSubmenu", ElMenu.SubMenu); // ElSubmenu seems special to register like this

How to Reduce import from react

I'm trying to reduce the amount of imports in my react files, I how do I group the imports so I can use the { } to get more then one from a file.
// assets
import location from "../../assets/home/header/location.svg";
import banner from "../../assets/home/header/banner.jpg";
import delivery from "../../assets/home/section-a/delivery.svg";
import arrow from "../../assets/home/section-b/arrow.svg";
import stock1 from "../../assets/home/section-c/stock-1.jpg";
import stock2 from "../../assets/home/section-c/stock-2.jpg";
import stock3 from "../../assets/home/section-c/stock-3.jpg";
// components
import IconList from "./IconList";
import Image from "../../components/Image";
import DisplayCard from "../../components/CardGroup/DisplayCard";
import ListDetail from "../../components/CardGroup/ListDetail";
import Slide from "../../components/Slide/index";

Images, SVG and those kind of files you cannot use named export the only way is to
import them one by one
You can use named export {} for example for multiple functions or variables in same file.
export const example = () => () ;
so you can after
import them like :
import {example, example2,example3} from "./examples";
or using the * to import all the export functions or variables
import * as Foo from "./examples";
const x = Foo.example();

is it possible to destrucure my import statements

i want to write below import in one single line. is it possible?
`import SellerAdaptor from '../adaptors/sellers';
import UserAdaptor from '../adaptors/user';
import ShopEarnAdaptor from '../adaptors/shop_earn';
import ProductAdaptor from '../adaptors/product';
import JobAdaptor from '../adaptors/job';
import OrderAdaptor from '../adaptors/order';
import NotificationAdaptor from '../adaptors/notification';
import CategoryAdaptor from '../adaptors/category';
import AdminAdaptor from '../adaptors/adminAdaptor';`

No.
Destructuring would let you import many values from one module.
You can't import multiple modules at once.
A typical pattern here would be to have an ../adaptors/index which imported all the modules and then exported them:
import SellerAdaptor from './sellers';
import UserAdaptor from './user';
// etc
export { SellerAdaptor, UserAdaptor, etc };
Then you would be able to:
import { SellerAdaptor, UserAdaptor, etc } from "../adaptors/index";

To be able to write import { A, B, C } from 'myPackage', it's upon myPackage and how it has been written.
If they are different files, you can't do it.
If you have one file adaptors that export the different modules, you can write your imports with the destructuring.

You can do like as follows:
import SellerAdaptor from '../adaptors/sellers';
import UserAdaptor from '../adaptors/user';
import ShopEarnAdaptor from '../adaptors/shop_earn';
import ProductAdaptor from '../adaptors/product';
import JobAdaptor from '../adaptors/job';
import OrderAdaptor from '../adaptors/order';
import NotificationAdaptor from '../adaptors/notification';
import CategoryAdaptor from '../adaptors/category';
import AdminAdaptor from '../adaptors/adminAdaptor';
export {
SellerAdaptor,
UserAdaptor,
ShopEarnAdaptor,
ProductAdaptor,
JobAdaptor,
OrderAdaptor,
NotificationAdaptor,
CategoryAdaptor,
AdminAdaptor
}
And Then You can Import like as follows
import { SellerAdaptor, UserAdaptor} from './<filename>'

Multiple imports in one row

I want to optimize my import. Is there any way to import type and default in one row using Flow?
import { default as ListIcon } from './List';
import type { Props as ListProps } from './List';
import { default as GridIcon } from './Grid';
import type { Props as GridProps } from './Grid';
Thank you in advanced!

yes you can Import multiple exports from module as follows
import { default as ListIcon, Props as ListProps } from './List';

Error when importing local component file into my LoginForm component

I am new to react-native but I have successfully imported local files into another before and I am getting this error message:
Unable to resolve "./common" from "src/components/LoginForm.js"
I am using expo XDE for the first time as well if that provides any insight. This seems so simple but I can't seem to find if I have a typo.
Here is a screenshot of my project file structure:
These are my imports in LoginForm.js
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';
import { Form, FormSection } from './common'; // what am i doing wrong with this????
These are my imports in App.js
import React from 'react';
import LoginForm from './src/components/LoginForm';

you have to create an index.js in your /common, Then export all of you components:
export * from "./Button";
export * from "./Card";
export * from "./CardSection";
export * from "./Header";
export * from "./Input";
export * from "./Spinner";
also be sure to export { YourComponentName }; in each file as well!