An example component library built with Vue CLI 3.
Drop the library in with a <script>
tag alongside Vue to globally install all components:
<div id="app">
<hello-a></hello-a>
<hello-b></hello-b>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/hello-vue-components"></script>
<script>
new Vue({ el: '#app' })
</script>
Or, if you only want to use a small subset of components, drop them in individually:
<div id="app">
<hello-a></hello-a>
<hello-b></hello-b>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/hello-vue-components/HelloA"></script>
<script src="https://unpkg.com/hello-vue-components/HelloB"></script>
<script>
new Vue({ el: '#app' })
</script>
Install the library with NPM:
npm install hello-vue-components
Then register the library as a plugin to globally install all components:
import HelloVueComponents from 'hello-vue-components'
Vue.use(HelloVueComponents)
Or, import components individually for local registration:
import { HelloA, HelloB } from 'hello-vue-components'
export default {
components: { HelloA, HelloB }
}
If you only want to use a small subset of components, only import individually packaged components to reduce the size of your application:
import HelloA from 'hello-vue-components.HelloA'
import HelloB from 'hello-vue-components.HelloB'
hello-vue-components's People
Forkers
mohandeveloper2020 maoberlehner sanscheese mhuxain herrbertling ellipse120 kricheldorf angeliski onionstu rcanepa aussieboi christiankienle fdlk mrrossbennett mmoore99 zeljkobajsanski dimaslz ulissepress frederikwagner chalermporn juliancoleman hhy5277 gorkamolero roma219 hewingram beapplied thebaronalex max629 djaxho maisonarmani kk9599 eastern-research-group redoc123 gdseck quannt iunki dylan-conlin ccppchen shemu felspreader baburshahsayer luozeshenghello-vue-components's Issues
[feature] Add a "docs" section within the SFC files?
While playing around with the components, I noticed that I'd sometimes like to add some additional documentation besides what is generated out of the box for the README.md
, like so:
<docs>
## Documentation
This is a test
</docs>
Might also be useful if you want to expand this thing to using Vuepress, as outlined in #2 :)
Since I spiked this already on my local playground, I could open a PR if you're open to that?
[feature-request] Example setup for Vuepress documentation
Great work on this repository, it's very useful!
How do you feel about adding an example Vuepress docs with basic setup and integration in package.json?
Can't find components when building
Hey Chris. I am attempting to use your setup in my own Library of Components. When I try and build the components using node_modules/.bin/vue-cli-service build src/index.js --target lib --name index --dest dist/
I get the following....I'm not sure why.
⠙ Building for production as library (commonjs,umd,umd-min)...
ERROR Failed to compile with 6 errors 4:32:49 PM
These dependencies were not found:
* @/components/Logo in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./build-utils/global-vue-loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/Navigation.vue?vue&type=script&lang=js&
* @/components/Organization in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./build-utils/global-vue-loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/Navigation.vue?vue&type=script&lang=js&
* @/components/OrganizationSelector in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./build-utils/global-vue-loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/Organization.vue?vue&type=script&lang=js&
* @/components/ReviewsLink in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./build-utils/global-vue-loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/Navigation.vue?vue&type=script&lang=js&
* @/components/Search in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./build-utils/global-vue-loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/Navigation.vue?vue&type=script&lang=js&
* @/components/UserProfile in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./build-utils/global-vue-loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/Navigation.vue?vue&type=script&lang=js&
To install them, you can run: npm install --save @/components/Logo @/components/Organization @/components/OrganizationSelector @/components/ReviewsLink @/components/Search @/components/UserProfile
My components all live under src/
Script inside SFC results in 'component is not defined' error for UMD.
Steps to reproduce
- Pull
hello-vue-components
from GitHub - Run
npm install
- Update
src/HelloA.vue
(see changes below) - Run
npm run build
- View the output
./dist/demo.html
in the browser (Chrome) - Errors like the Dickens!!! (single error, screenshot below)
Change to the SFC
...
<!-- HelloA.vue -->
<script>
export default {
name: 'hello-a',
data() {
return {
name: 'HelloA',
}
},
}
</script>
...
Complete SFC
<!-- HelloA.vue -->
<template>
<div class="hello">
{{ name }}
</div>
</template>
<script>
export default {
name: 'hello-a',
data() {
return {
name: 'HelloA',
}
},
}
</script>
<style>
.hello {
color: orange;
}
</style>
<meta>
{
"description": "A component that says \"HelloA\" with orange text."
}
</meta>
<example>
<!-- No props or content are necessary. -->
<hello-a></hello-a>
</example>
Lint "meta" custom block
When I run yarn lint
I get this error in every component with a meta
custom block:
[error] src/HelloA.vue: SyntaxError: Void elements do not have end tags "meta" (17:1)
[error] 15 | "description": "A component that says \"HelloA\" with orange text."
[error] 16 | }
[error] > 17 | </meta>
[error] | ^
[error] 18 |
[error] 19 | <example>
[error] 20 | <!-- No props or content are necessary. -->
Any ideas how to solve this issue?
Passing props other than string
Hi
I have created webcomponets using target --wc build target command. The component has a prop to accept json object. when i drop the web component in HTML and trying to pass JSON object as the same way if you use this componet in Vue.
"<"my-element :prop1="{fname:'test'}">"<"/my-element> // the value is not event detected
"<"my-element prop1="{fname:'test'}">"<"/my-element> // throws error prop expect object and not string.
as its a HTML, i am trying to pass a jS variable(JSON) and i couldn't. Other than string value , i am not able to pass any other value.
is document.queryselector('my-element').prop1 is a only way to assign values?
Example for SSR use?
Really great Example,
i also got it to work in my Nuxt.js Enviroment but without the SSR :(
I'm trying since Days to get it work in SSR mode. Could you provide some Information/Tipps or even a Example for that kind of case.
When i load it, i get the Error: 'document' not defined, because its server rendered.
As far as i found out is that it may be achivable with the target set to 'node'. In the packaged index.js i find some document uses from the vue-style-loader and and a line saying:
'vue-style-loader cannot be used in a non-browser environment. ' + "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
But until now i didn't managed to set the target of the build
Any ideas? :)
Library versioning
Hello Chris,
This repo is the only thing that sheds some real light on how to manage UI/Design systems on Vue on the web. Thank you for that.
I've been experimenting with it and couldn't find an easy answer to versioning. I assume you publish what is generated in '/packages/'. If so, how do you bump version numbers, since the folder is completely regenerated every time?
Thanks man
Library exporting globally as 'index'
After a long period of tinkering, I found out the library installs itself as a global 'index' object.
Should be configurable, right?
[feature] "Moderate" build process?
As you might notice through the issues I'm opening, I'm doing quite some stuff based on this repo right now :)
I wondered whether you might be up to adding some console.logs
to the build process – I found it rather opaque to start the process and then not getting any feedback while the packages are being built.
So I threw in some console.info
lines and carefully crafted fitting emojis (well… 😉).
Since that screenshot had to come from somewhere, here's the diff, so adding this would be rather simple: master...HerrBertling:feat/add-console-logs-to-build
Add a "docs
extractCss false not working with SSR // server side rendered code not matching client side
Dear Chris Fritz,
i know this is a long shot because the project is two years old already, but I'm really not sure whats wrong and could really use some help with the set up of your example component library because lately it is giving me numerous errors when i try to use it in an nuxt project:
-
with extractCss: false - this is not working at all anymore - it gives a "document is not defined" because of something happening in vue-style-loader (the addStyle function) - but then again maybe this is not directly a problem of the set up of this projet?
-
then I switched to extractCss: true and (I think) there are no problems with the style-loader however then i get a "server side rendered content does not match client side" error and i tracked down the problem (maybe there are more but this seems to be one of them) to my component containing empty(!) slots + some other html tags - now i checked with the nuxt guys but they claim something must be wrong with my library build and i really can not figure out what it could be...
Now i easily could provide more details, reproduction steps, example repos and everything - i just wanted to check first if this repo is actually still active and issues are read and you would be able to help...
Sorry for taking up your time, i'm just really stuck here...
Add a
Add an example with vue-router
First of all awesome work,
I'd like to pick your brains about whether or not it would be easy to setup an example that exports a full vuejs application and not just components. The reason I say this is that all lerna examples seem to just use components as their exports. None of them allow you to install app2 into app1 and have seemless routing between both packages.
Would be quite handy to have at enterprise level apps.
Any ideas on how one would go about that?
"yarn dev" fails because it wants components to be installed as dependencies
I know this is currently in alpha, but I still wanted to ask: When running yarn dev
with a fresh clone of this project, I get the following error:
Failed to compile with 3 errors
These dependencies were not found:
* hello-vue-components in ./demo/main.js
* hello-vue-components.hello-a in ./demo/main.js
* hello-vue-components.hello-b in ./demo/main.js
To install them, you can run: npm install --save hello-vue-components hello-vue-components.hello-a hello-vue-components.hello-b
Which I get, I did not do that. Removing these lines (of course) helps, because then I can't even run into this issue: https://github.com/chrisvfritz/hello-vue-components/blob/master/demo/main.js#L4-L10
Am I holding this wrong? Is this known? What should be done to prevent this?
Thanks for any help – happy to contribute, even though I suspect this is a bit beyond my JS/Vue knowledge 🙈
EDIT: Reading this again, I think the most important question is missing: Shouldn't this work without the npm install
initially?
Typescript & Vue property decorator support
This example was great for helping me create a more robust design system in vue cli and share between many projects. One problem I've run into in my library is coded with typescript and vue property decorators, but the projects importing my library don't necessarily contains the same code base. Is it possible to easily enable compilation of typescript or requiring the necessary packages to allow this to work on any code base?
This was an amazing find in my research and I appreciate what you've done here.
Thanks,
Jon
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.