Comments (4)
baiwusanyu-c
commented on May 30, 2024
In the case you provided, I did not find that ce-ui-core.js was used in the playground, so I don’t know how you used it specifically, but I noticed that you used createCEApp incorrectly.
I made changes to the files in the package directory, and the alert component can be rendered.
// index.ts
import { createCEApp } from '@unplugin-vue-ce/ce-app'
import './style.css'
import Alert from '@components/Alert'
const ClgAlert = createCEApp(Alert.AlertBase)
// export individual elements
export { ClgAlert }
export function register() {
ClgAlert.mount('clg-alert')
}
register()
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app">
<clg-alert></clg-alert>
</div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>
from unplugin-vue-ce.
mrcego
commented on May 30, 2024
I just built package repo using pnpm build and then pnpm i to do it part as project dependency, and tried to use in index.html file of playground monorepo. My idea was the same as your example, exposing and using register() in playground monorepo directly.
from unplugin-vue-ce.
baiwusanyu-c
commented on May 30, 2024
The warning message about Component is missing template or render function is because you exported an object, so you need to make sure to pass in a specific component object.
const ClgAlert = createCEApp(Alert.AlertBase)
from unplugin-vue-ce.
mrcego
commented on May 30, 2024
Look like it's correct now, I missed miserably that detail 😊. In the other hand, I just ran in issue with slots, but this is another story. Thanks again @baiwusanyu-c.
from unplugin-vue-ce.
Related Issues (20)
- Tailwind styles missing in sub-style
- createCEApp instance like createApp, is it possible? HOT 1
- Sourcemap point to missing source files HOT 2
- [feat requeset] Support `:host` selector
- How to use switch shadow? HOT 2
- When importing the same component twice, the styles only apply to the first one. HOT 7
- styles are missing when using defineAsyncComponent within vue file HOT 2
- 2x nested defineAsyncComponent HOT 1
- Webpack build fails HOT 5
- Problem with build of `webpack` and `vite` in one node instance. HOT 4
- ERROR: [plugin: externalize-deps] Failed to resolve entry for package "unplugin-vue-ce". HOT 3
- Vue 3 CLI Webpack 5 error on custom web component build
- Dependency Dashboard
- [BUG] - Style tags not added when using externals HOT 7
- [BUG] - Multiple CE instances style breaking when 1st CE removed from the DOM HOT 7
- [BUG] - CE component styles are removed too early when using Transition HOT 1
- [BUG] - ES modules import "./some-lib.css" seems not to end up in the shadow-root HOT 7
- [BUG] - Web Component crashes when calling inject-api-custom-element.ts HOT 1
- [BUG] - Sub components style tags not added in Storybook HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from unplugin-vue-ce.