chrisvfritz / hello-vue-components Goto Github PK
View Code? Open in Web Editor NEWAn example component library built with Vue CLI 3.
License: MIT License
An example component library built with Vue CLI 3.
License: MIT License
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...
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?
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?
Steps to reproduce
hello-vue-components
from GitHubnpm install
src/HelloA.vue
(see changes below)npm run build
./dist/demo.html
in the browser (Chrome)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>
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
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? :)
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
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?
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?
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?
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?
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
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/
After a long period of tinkering, I found out the library installs itself as a global 'index' object.
Should be configurable, right?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.