chrisvfritz / hello-vue-components

An example component library built with Vue CLI 3.

Hello Vue Components

An example component library built with Vue CLI 3.

Usage

Directly in the browser

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>

In a module system

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 }
}

Individually packaged components

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 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?

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?

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?

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? :)

Script inside SFC results in 'component is not defined' error for UMD.

Steps to reproduce

1. Pull hello-vue-components from GitHub
2. Runnpm install
3. Update src/HelloA.vue (see changes below)
4. Run npm run build
5. View the output ./dist/demo.html in the browser (Chrome)
6. 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>

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?

Add a

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:

1. 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?

2. 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...

"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?

Add a "docs

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/

[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?

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

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

[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

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?