In VueJS 2 Practice we will explore a possible solution to a simple Problem: How to structure your Project, Folders, Assets and Single File Components?
Create a VueJS Project/Folder Structure, that will contain Components for Detail views of products, users and payment steps. It’ll also contain a file with vuex state definitions. The project will also include API fetching methods, that should be accessible from every Single File Component.
Take a look at the official recommendation for VueJS Project Structure.
The API fetching methods need to be centrally available. What else is centrally available in your App?
Your Project Structure would look like the one presented in the screenshot.
You have two VueJS Components “*Detail.vue” and “*List.vue” for each products, assets and users.
Your vuex state definitions are obviously in the “vuex-” store.js file.
The hardest one was probably the placement of the API fetching methods. There is no right answer, but there is my answer that worked for me many times. Since your methods need to be available centrally, the vuex Store-Object in store.js is the perfect place for it. You combine the actions method in store.js Store-Object with your API fetching methods.
Then you can call from every part of your Application the following line and execute your method. The best part of this structure is that you can directly insert your freshly fetched data into the Vuex Store.
And that is how you solve this VueJS 2 Practice . If you love VueJS like we do, please consider enrolling in our VueJS Certificate Course. It’s on-demand with lifetime access!
Andrey Bulezyuk is the founder of German IT Academy and a course creator. He mainly covers topics from Web Development (NodeJS, VueJS, Django etc.) to Data Science (Pandas, Numpy) and Machine Learning (Tensorflow, Keras, etc.).
He published a German book “Algorithmic Trading“, giving his readers the opportunity to learn how to code automatic trading systems for the stock market or the Forex.
He has experience as a Backend and Frontend Developer. In his early years he worked on Web Projects as a Freelancer. Switched later to Financial Market System Developing. Currently employed as Machine Learning Engineer.
He takes part in different projects and acts as a Co-Founder in different small start-ups. Andrey Bulezyuk was an employed Full-Stack Developer in Munich. Currently his duties do cover areas of Machine Learning and ETL.
If your project cannot be used with vue-cli3, then go with “$ npm install vuetify“
HOW TO BECOME A VUE.JS DEVELOPER?
We’ve got something for you. Check out the VueJS Junior Course. In this online course you will dive deep into how Components work and how you can quickly create a Vue.js Website.
ACTIVATION IN VUE SOURCE CODE
You have first import Vuetify in main.js. Then you tell your Vue App to use the freshly imported Vuetify.
USAGE OF VUETIFY COMPONENTS
Now that you have Vuetify in your Application, you can go ahead and start using all the Components that this big framework offers you. Where to begin? Start with the official library of all available Components (https://vuetifyjs.com/en/components/api-explorer).
Let’s use a simple Component called “Carousel”: <v-carousel>.
When you save this Component and open it in the browser, you should see something like this: