Hey, thanks so much for reading it through, glad you enjoyed it!
So I don't currently have an example repo but I'm working on including these features into the todo app repo I have. When I finish that I'll let you know.
In the mean time, here is how I structure my apps:
- src
- App.vue
- components/
| - TheNavbar.vue // A unique component for my app's navigation
| - BaseCard.vue // Designed component for all UI cards
| - IconBase.vue // as per the article
|
| - icons/ // this folder is also like in the article
| | - IconMoon.vue
| | - ...
|
| - inputs/
| | - BaseTextInput.vue // the one that gets imported into others
| | - InputLarge.vue // uses BaseTextInput and customizes it
- layouts/ // for compound components, those made up of the basic ones
| - forms/
| | - BookForm.vue
| | - AuthorForm.vue
| | - ShelfForm.vue
|
| - home/ // for compound components used on the home page only
| | - ShelfDisplay.vue
- pages/ // pages are actual URL endpoints (www.myapp.com/home)
| - Home.vue
|
| - library/ // pages with subroutes can be nested
| | - Index.vue
| | - Form.vue // (www.myapp.com/library/{ form: 'new-book'})
// I dynamically choose which form to use with a route prop
- router
| - index.js
| - modules/
- store
| - index.js
| - modules/
- utils/
- api/
For the form components, the components are inside a <fieldset> tag and it is the final Page components that wrap them all in a <form> to avoid nested forms.
Pages generally only need to import compound components and that might be where I put the logic regarding that page, so forms would v-model to a value here.
The utils/ folder is for functions that are used across the app for specific purposes, like functions a function to calculate a currency conversion. They do all their work locally.
The api/ folder is for organizing calls to your database, or any other requests to a network.
This is a rough explanation of how I've come to organize my medium+ apps, its not final but it works so far.
Did not know about this library, it is a very good starting point but I still think it misses the mark in a couple of ways, some of which are described in Markus' article:
The components aren't functional (that adds some bloat)
They aren't transparent (it doesn't bind classes and attributes)
Component classes are baked in which reduces flexibility
Uses mixins (that's fine but Vue 3 is already moving away from those)
These are the issues I would personally have using this library, but it does an amazing job following accessibility guidelines and keeping overall bundle size down.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey, thanks so much for reading it through, glad you enjoyed it!
So I don't currently have an example repo but I'm working on including these features into the todo app repo I have. When I finish that I'll let you know.
In the mean time, here is how I structure my apps:
For the form components, the components are inside a
<fieldset>tag and it is the final Page components that wrap them all in a<form>to avoid nested forms.More on forms here: Vue.js - Forms, components and considerations - Medium
Pages generally only need to import compound components and that might be where I put the logic regarding that page, so forms would
v-modelto a value here.The
utils/folder is for functions that are used across the app for specific purposes, like functions a function to calculate a currency conversion. They do all their work locally.The
api/folder is for organizing calls to your database, or any other requests to a network.This is a rough explanation of how I've come to organize my medium+ apps, its not final but it works so far.
This is really good.
Just curious, but have you looked into Atomic Design + TailwindCSS + functional Vue components, these pieces all seem like a good fit.
Your article has really given me much to think about.
Thanks again.
Yeah those were all readings that inspired me to work as I do now, all great reads and styles.
Thanks for the response.
I looked at one of the documents you referenced:
markus.oberlehner.net/blog/reusabl...
tailwind-css/
Further reading led me to this: vuetensils.stegosource.com/
Would you considered this a better starting point for making base components?
Did not know about this library, it is a very good starting point but I still think it misses the mark in a couple of ways, some of which are described in Markus' article:
These are the issues I would personally have using this library, but it does an amazing job following accessibility guidelines and keeping overall bundle size down.