German IT Academy

VueJS Practice – #1 Project Structure

by Andrey Bulezyuk | Nov 7, 2019 | Frontend

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?

Task

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.

Hints

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?
Read the detailed VueJS Style-Guide

Solution

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.

  actions: {
    getUsers(context) {
      const users = axios.get('https://myresturl.com/users/all')
      context.commit('increment', users)
    }
  }

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.

this.$store.dispatch('getUsers')

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!

GITA Coach Andrey Bulezyuk

by Andrey Bulezyuk | Okt 22, 2019 | Frontend

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.).

What is VueJS?

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.

Material Design with VueJS

by Andrey Bulezyuk | Okt 22, 2019 | Frontend

Do you have a VueJS App or do you want to build a Vue App and you want to have a nice Material Design?

WHAT IS MATERIAL DESIGN?

Material design is a guideline with predefined rules. Both describe how your application should look like in order to make your application look consistent and usable across all parts and devices.

HOW TO USE MATERIAL WITH VUEJS?

In order to implement Material Design in your VueJS Application you could create your own Components and style them according to the Material Principles.

We are going to explore the usage of third party tools inside our Vue App.

The quick and lightweight approach is to use some CSS Library like Material Boostrap (https://fezvrasta.github.io/bootstrap-material-design/). We will use the Vue Native approach and use the Vuetify Framework.

VUETIFY FOR MATERIAL VUEJS

Installation

In vue-cli3 User Interface find install Vuetify.

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:

What is Vue.js?

by Andrey Bulezyuk | Okt 16, 2019 | Frontend

Vue.js is an open-source JavaScript framework used for building a user interface web application and was created by Evan You. Its initial release was in 2014. VueJS focuses on the declarative rendering and composition of components.

What is a Vue component?

Components are one of the most useful and powerful features of Vue.js. They are reusable Vue instances that create custom elements and help to extend basic HTML elements. For a better understanding of how components work with VueJS we will look at the following example:

<html>
   <head>
      <title>VueJs</title>
 
   </head>
   <body>
      <div id = "component1">
         <hey></hey>
      </div>
   
   </body>
</html>

Vue.component('hey',{
   template : '<div><h1> This is a component </h1></div>'
});
var vj = new Vue({
   el: '#component1'
});

Here in the HTML section, we have created a div with id component1 and in the JS section, a Vue instance is created with that id using the new keyword. Then we have created a component to use with that instance. The syntax used to create a component is as follows:

Vue.component('component name',{ // options});

So we have a component hey which becomes the custom element and can be used with the Vue instance created. Now inside the div with id component1, we can use the name of our component as an element. We can also make multiple instances that will share this same component that we have made. Below is the output of the code:

You can try it yourself without any installation: https://jsfiddle.net/AndreyBulezyuk/tnuLmy04/

For a deep understanding of VueJS Components get our VueJS Certificate Junior.

The File structure of Vue.js

Now that we know what components are and how they work in VueJS, we will learn about the file structure. VueJS has a very simple file structure with files like App.vue which is a single file component having HTML, CSS, and JavaScript. We have to import all the components which we want to use in this file as it serves as the main top-level component that is a framework for the entire application. For this purpose, we use the import keyword and specify the name of the component made with its location. Another file that is in the VueJS structure is main.js. This is the main file that imports the Vue library and the app component from App.vue. Vue instance is created in this file which is assigned to the DOM element identified by the selector which is defined in index.html file.

VueJS performance is fast as it is very lightweight. VueJS makes the use of virtual DOM which means a replica of DOM is created rather than making changes in the original one. Built-in directives like v-if, v-else, v-show, v-bind, and v-model are used to perform various actions. VueJS with its template-based approach is very easy for a beginner to understand. With all its functionalities VueJS has a great scope in the future.

Next Entries »