vue-examples
vue-examples copied to clipboard
peterlamar
Add demo
Great idea! I'll look into these this weekend. Do you have a preference between the two?
I think codesandbox will be better
Just open site,
Open vue template,
Add dependencies
App.vue
main.js
Result:
no one will download the entire archive from github, in order to look at examples
Your awesome, and this is an awesome idea! I did a quick pass and converted the first 6 examples up to vuebars to have codesandboxes. I'll keep at it, and feel free to pull request any future examples you convert and I'll add em asap!
What about:
├─ aggrid/
│ ├── ... ?
│ └── readme.md
├── vuebars/
│ ├── ... ?
│ └── readme.md
└── ...
vuebars/readme.md:
Overview text...
documentation link...
Minimal code example (for copy-paste):
main.js
import Vue from 'vue';
import VueBars from 'vuebars';
Vue(VueBars);
App.vue
<bars :data="[]" :gradient="[color, color]">
Examples:
documentation link, codepen link, codesandbox link ...
For in-browser usage:
<script src=./node_modules/vuebars/dist/vue-bars.js></script>
For vue cli:
// npm i vuebars
import VueBars from 'vuebars';
Vue(VueBars);
I think thats great! Want to do one example in a pull request and I'll follow the pattern?
Your PR Looks great, merged it in! I'll start bringing up the other examples to whatever spec we finalize on.
-
What linter did you use for the html file? I have been trying to decide on one and Atom beautify is what I have been using, it seems to fight with eslint and some of the other ones I have been experimenting with.
-
I'll take a look at github pages, its a fair point.
-
What were you getting at with the tree view? Was that for the home readme to give an overview of all the files for all the examples or per project?
├─ aggrid/ │ ├── ... ? │ └── readme.md ├── vuebars/ │ ├── ... ? │ └── readme.md └── ...
- there are no linters that format html well
- just example for folder structure
Turned on github pages, def a better idea than linking the index.html file.
-
Thanks for the reassurance, I was thinking it was just me.
-
So for folder structure, are you proposing a subfolder within each folder?
or directory for each type of package,
ex. for charts:
/chart/readme.md with examples with different packages for charts
let's say i am a developer. And I want to add a chart to my site. I google: 'vue charts'. And what do I get? At least https://github.com/vuejs/awesome-vue#charts, But these are just package links. and I need to go into each and see the demo. But what if there was a page where there are all the options for all the charts that I can add?
That's a good point, I hate roaming through all those pages. Half of the demos don't work. The worst is when you think a chart is perfect just to figure out that there is some slight bug in the implementation.
I'll play with some ideas, but simply a page that showed working demos of charts would def be useful.
Ok sir, all examples have a readme with codepens and github pages hosting when applicable. Also, charts are in their own section in the main readme. Any other thoughts?
Also, I do like your idea with the charts and am still considering big ideas around it
https://github.com/peterlamar/vue-examples/tree/master/chart
that's nice, but it's not real-world example. I think (and hope) that no one will write
I already have a huge vue app. And i want to add some charts to it. And... you offer write
+ what about lazy-load this ?
I will have this chart on one page out of 30, and I do not want to download it unless it will be used
Ok, ill do vue cli versions of those charts. Thanks for your perspective
Is what you did for your example what you are looking for? https://codesandbox.io/s/74prz8jp7j
Ok, if you have time gimme another pull request. Otherwise I'll give it a shot
Given the time that past, it would prob be best if this was in a new repo for vue cli charts. This repo can stay a time capsule for learning vue from the ground up for those with no front end experience
@peterlamar email notifications I do not use this repository, I have nothing to learn from it