Vuesax: Make the framework modular and new components ideas

[VicGUTT]

_For starters I want to point out that I love the general idea/theme/feel of Vuesax and that a great job went into it.
Second, I also want to point out that I am fairly new to Vue and JS frameworks in general (up until now I've been doing most things vanilla style, crazy right ?). So pardon me if I may unknowingly say something showing my inexperience with Vue._

Getting to the point.

I think it would be nice if we could :

• Import components as we need them, something similar to import Buttons from 'vuesax/vsButton' instead of the whole framework
• Have available SCSS, SASS or LESS styles for each component. And so it will be much more easy to extract those styles into their own files and customize them if need be
• Some options to maybe set/modify some default behavior or change a CSS variable (Like set a different primary color for example)

Component ideas :

• Navbar
• Lists
• Pagination

Those are basic components fairly easy to implement I believe.

I'm not just suggesting :

I would personally enjoy getting my hands dirty and joining in the hard work but as I mentioned I'm just getting started with Vue. So not sure if I can really be of great help implementing things. I took a quick look a the source codes and it's pretty understandable but a little bit confusing to me because of the reasons stated in #48.

That being said, this I can help with as (with some practice) I can speak both English & Spanish along with French and Creole (aha might come in handy who knows).

Cheers.

[luisDanielRoviraContreras]

First of all thank you so much that you like vuesax

There are many points that vuesax needs to improve, such as adding a css preprocessor that I'm thinking of is in (stylus) and migrating all the components from css to stylus, which is a somewhat tedious and laborious task

I would love for you to help us, it is always good to help, no matter if you are new in vuejs but you want to contribute to the project

What do you think if you choose something simple to contribute and little by little you are helping more and learning

I can suggest some contributions not as difficult as:

• change components from css to stylus one by one making a request for each component changed

• edit the js of the components by adding comments in English and changing the variables functions and other things that are in Spanish to English

• Review the documentation and improve it or correct grammatical and pronunciation errors

• Crear componentes simples como

  • Cards
  • dividers
  • Footer
  • Expansion Panel

Whichever you choose, please give a prior notice to assign it and not work in the same

[VicGUTT]

What do you think if you choose something simple to contribute and little by little you are helping more and learning

What do I think ? I think it suits me well.

I can :

• Start by changing the components styles to using a preprocessor. Unfortunately though I have never dabbled with Stylus before, but only SCSS/SASS and LESS. I can however start with SCSS and later on create the Stylus variant as it seems very similar.
• Continue by changing and translating the JS files

Later on :

• Modify the docs just like with the JS files
• Create new components. If I am not mistaken @fergardi said he would handle the Card component so I will probably look elsewhere.

[luisDanielRoviraContreras]

Great good any question you tell me to help you and it is important that you advise to start some component and thanks for the contribution

[luisDanielRoviraContreras]

@VicGUTT The functionality of adding individual components is now ready 👍

https://github.com/lusaxweb/vuesax#or-use-individual-components

[VicGUTT]

Hey, so I've been trying to integrate SCSS to the source code (in /vuesax/src/vuesax) of Vuesax. It works fine, the only problem is that I can not see the changes I've made into the browser because the Vue instance is not being mounted to the #app element.

When running npm run serve, the dev server starts correctly, I can see my SCSS changes

<style lang="scss">
// Inside : vuesax/src/App.vue
$black-color : black!important;
body {
  background-color: $black-color;
}
</style>

_The body of course turns black_

But none of the components gets rendered because there's no #app element in the file generated by webpack.

So my question is, how can I fix this problem ?
I understand how it works though : npm run serve runs vue-cli-service serve which in turn takes advantages of the html-webpack-plugin. But all of this is happening in the node_modules folder and so are not meant to be changed there.
Am I missing any dev setup ? 🤔

Secondly, if I understood correctly npm run dev runs a dev environnement to work with Vuepress and generate the docs right ?
If yes, that is not what I want for now as I am not trying to edit the docs but Vuesax itself.

[luisDanielRoviraContreras]

When executing npm run dev we raise the documents but they internally have to vuesax then to test your changes or new components you have to add them in the documents.

[VicGUTT]

Alright, so if I understand correctly I should only be dealing with the /vuesax/src/vuesax/components folder ? And when I'm done I do my npm run build and make my pull request right ?

Ps.: I'm just trying to understand the workflow as I don't want to create any problems later on nor for others

[luisDanielRoviraContreras]

NOT the idea is that you work on the / vuesax / src / vuesax / components folder and add a new docs to test what you do or the corrected errors example/ vuesax / docs / documents / components / newComponent.md is a Example name if you want to check the others to see the documentation structure and to show it in the menu vuesax / docs / .vuepress / config.js please for better information check the vuepress documentation

Do not run npm run build so do not mix that in master

[VicGUTT]

Ooh right got it !
Thank you 👍