I am using pinia to manage state into my Vue3 app. There has been thorough discussion here to break pinia store into individual files like state, getters, actions. But I am looking for a more 'stable' and 'elegant' solution to break the pinia store into individual files.
Related
I was trying to test Lazy-loaded CMS components on ongoing Spartacus project with version 2.1.4 and I wasn't able to properly display the components. Before I continue with further investigation, I just want to check couple of things:
is it possible to lazy-load components which we have overriden, for example BannerComponent, SearchBoxComponent...?
is it possible to apply lazy-load on custom CMS components ?
are there any limitations when this feature won't work? Maybe in combination with some other feature?
There are many OOTB Spartacus CMS components that we have overriden in our project, and I have defined lazy-load feature for couple of them like it is described here https://sap.github.io/spartacus-docs/customizing-cms-components/#lazy-loaded-cms-components-code-splitting inside modules for certain components, this is one example:
breadcrumb.module.ts example here
and after the build, chunks are there, visible from source tab also, but components aren't displayed and there are errors because of missing modules (such as CommonModule, RouterModule, basically for everything that we used in our custom implementation..) which are declared in corresponding module but for some reason aren't registered at all.
Any guesses what we should fix in order to check if this feature is working in our architecture?
I suggest to stick "CMS-driven lazy loading of feature modules" (as explained here: https://sap.github.io/spartacus-docs/lazy-loading-guide/) instead of lazy loading of separate components (using component: () => import()) as it's simpler to make it work.
The idea is to define CMS mapping inside the module, which then will be lazy loaded (with components, services, etc.) instead of lazy loading separate (and decoupled) components. Then, in the root application, we let Spartacus know, which feature module should be loaded, when we want to render specified component (example: https://sap.github.io/spartacus-docs/lazy-loading-guide/#configuration-of-lazy-loaded-modules)
Using component: () => import() will lazy load only component code (no module, unless defined in the same file), such a component will have access to global (root) services, etc. It's still useful in some cases, but a bit problematic to make it work in more than basic scenarios (but this will improve in Spartacus 3.x/4.0).
Regarding your questions:
is it possible to lazy-load components which we have overriden, for example BannerComponent, SearchBoxComponent...?
Yes. Briefly explained here: https://sap.github.io/spartacus-docs/lazy-loading-guide/#wrapping-library-code-in-a-lazy-loaded-module
is it possible to apply lazy-load on custom CMS components ?
Yes.
are there any limitations when this feature won't work? Maybe in combination with some other feature?
As explained above.
I fully expect this is a little niche, and I'm not sure if there's a solution, but I have an interesting situation.
We have a library of Vue components we use in our projects, from form fields to data tables. Some of these components need aria labels, buttons, labels, messages, and so on. Most of our projects will need translating into any number of languages, on the fly, often via user-selectable drop-down menus. Translation is handled by Vue i18n.
I have begun adding slots and props as required to allow this translation, but I realise it's going to be a lot of repetition to use the components, as it will be necessary to translate them each time they are used, some of which may be used hundreds of times in a large project.
The components are part of a library which has no knowledge of any current translation, and won't have access to the translated strings.
What I'm wondering is if anyone has an idea for how to essentially say 'here are some default slots and props for this component, which will override the defaults set in the component itself, but will apply every time I use this component in this project unless otherwise stated'.
I can't make these the defaults in the component itself, as what the default will be differs from user to user.
The only two thoughts I've had are:
Somehow passing the instance of the vue-i18n plugin to the components as they're used, allowing them to find their own translation strings.
Creating 'wrapper' components which are part of the current project, and thus do have access to translations, which can set a lot of these repetitive props and slots for us. This seems pretty reasonable, but doesn't solve where some components use others (e.g. our form components can be used by themselves, or initialised by a form builder, which then wouldn't know to use the 'middleware' components)
Am I missing an obvious solution?
I want to know what is the best way to order the folders and other components in a vue.js project so that it can be easily maintained and scalable
Like the comments already say there are a lot of ways and opinions of how to structure your vue project.
Like tony19 already said it's a good start to use the vue-cli to generate a project.
If you want to see a real world example of a project you could try this one: https://github.com/gothinkster/vue-realworld-example-app
gothinkster actually has an example of the same project in a lot of different frontends and backends. just look at their repos.
If you plan to use vuetify as your ui library i can also recommand to have a look at their free templates
https://vuetifyjs.com/en/themes/premium/
There are plenty others of course. You might want to search for "vue real world example" or something similar on google.
For scaleability i would say to split things into smaller files and components is a good practice.
For example when creating a vuex module you could have a file for the complete vuex storage or a file for each module or even split each modules into an actions.js, mutations.js getters.js state.js and an index.js which combines those 4.
Please keep in mind that all of the above is my opinion and others might think differently.
I'd advice you to go for the standard cli-structure - but remember that you can still add sub-folders everywhere and don't get caught putting in 200 files under modules or something like that.
If you're about to make a module - add a folder.
If you're about to add a component - add a folder
and so on.
This also counts for the store, which can get pretty big at times.
If you want to split your store because you know it will be too big, add sub-folders for actions, mutations and so on seperately and then add in the files like 'actions/actions_user.vue' '..actions_items.vue' and so on - or leave out the 'actions_' if you're more comfortable with that (they are in the actions folder now anyway, but it could make it harder to search for them if you're not using the file-tree).
For how to split up actions (and the other content of the store) into multiple files, please look up my answer here
there are also the options to add modules in the store or even adding multiple stores, which contributes to scaleability, but - in my opinion - can get finicky and harder to read than it being useful in the end.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I created new react native project as per client requirement.I have knowledge and yet not any project done so please give me any project structure how to build
this project.
Or give me any git hub link
Thanks
In your scenario, you can make your own folder structure or I have some example which I follow by myself.
type vs feature
Separating by type means that we organise files by their type. If it is a component, there are container and presentational files. If it is Redux, there are action, reducer, and store files. If it is view, there are JavaScript, HTML, and CSS files.
src
app
api
assets
redux
actions
reducers
store
components
containers
navigation
styles
utilities
src/
All the files are inside this base component.
api/
This folder contains logic related to external API communications, it includes:
constants.js - where all required static values are stored.
helper.js - for storing reusable logic.
individual feature files — Each feature file contains api communication logic for a particular feature.
assets/
Just as the name implies, this houses static files (e.g images) used in the application.
redux/
This holds all the redux files if you are using react-redux for managing state. Inside redux folder you have actions, reducers, store which can easily manage your redux files
redux/actions
All the action files which are using around redux goes here.
redux/reducers
All the reducers which are using around redux goes here.
redux/store
You can put your store inside this redux store folder.
components/
Shared components used across features are placed in this directory. An example of such (as shown above) is the layout component, which is used to wrap the application components and determine its overall layout.
containers/
You can put you all screen-based components inside here (Eg - SplashScreen, HomeScreen).
navigation/
You project base navigation goes here. You can create stack navigator and export it to your application.
styles/
If you have global styles defined in your project you can put it over here like colors, font styles like things.
utilites/
You can put utils files over here.
Note: This structure is based on my experience. You can create your own structure once you done with more experience
Refere these links also
https://medium.com/the-andela-way/how-to-structure-a-react-native-app-for-scale-a29194cd33fc
https://www.freecodecamp.org/news/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92/
https://github.com/asimolmez/react-native-folder-structure
https://github.com/thecodingmachine/react-native-boilerplate
I am beginning a project where I am tasked with combining 7 codebases into 1 codebase. Each of these codebases are very different and handle different functions (Registration, Surveys, Email Blaster, etc). I would like to use Vue for the frontend of each of these (Laravel on the backend).
My initial structure for this project involves using one app.js file with one Vue instance and separating each of the codebases into components. Vue-Router will determine which one of the components gets loaded.
//example of the layout thusfar
let routes = [
{ path: '/registration', component: require('./components/admin/Registration.vue').default },
{ path: '/surveys', component: require('./components/admin/Surveys.vue').default }
]
Should I be using a separate Vue app for each codebase or will I be fine by splitting them up as components in the same Vue app? They will all be pulling from the same database, using the same API calls, and be housed under the same domain (registration.example.com, surveys.example.com, etc).
Yes it is but it decreases the performance. You can explore vuex. Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
Its easy to learn and wont take much time as well.
Poor showing here by SO. The answer is to separate each codebase into different apps for those who see this. Otherwise, managing astronomically large components will be difficult. Don't listen to Ram.