Author: Code Maze

Creating Vue.js Client Side – Components Props and Events

We have implemented everything that we have learned so far, from navigation and API services to data display. It’s time to dive deeper into more complicated things which we are going to make easy to understand. We are going to make an additional component and then show how communication between parent-child components works. For the complete series navigation visit: Vue.js Series. To download the source code for this part, visit Components Props and Events. This post is divided into several sections: Creating a New Component Event Handling Conclusion Creating a New Component Do you remember the OwnerList component from...

Read More

Creating Vue.js Client Side – Creating Components and Displaying Data from Backend

We have learned how to create an API service and fetch data from the backend. Now, it’s time to display that data to a user and for that, we need to create a component. As we mentioned in Part 1 of this series, the Vue.js components consist of three parts: a template, a script and a style. After we create a component, we have various ways to use it. We can register it globally to use it in any other component. Otherwise, we can internally register it inside a single component and it will be available only in that...

Read More

Creating Vue.js Client Side – Axios HTTP Client and Environment Files

We have learned how to create Vue.js components and how to create and use navigation, but we are still missing one of the most important things in our project. It’s time to get some actual data from our backend and to display it in our components. To accomplish that, we need to use the HTTP Client library and because Vue.js doesn’t have its own, we are going to use Axios. Furthermore, we need to configure Axios to send requests to our backend server depending on the environment our application is on. For the complete series navigation visit: Vue.js Series....

Read More

Creating Vue.js Client Side – Routing and Navigation

Right now, we have a working Vue.js application and we are ready to implement some functionalities in it. But before we start creating some great functionalities we are going to create the navigation to be able to navigate through our application. We already have vue-router in the application and we are going to use it to create new routes and connect it to the components. We are going to use the Bootstrap library for styling our components. For the complete navigation of this series, you can visit Vue.js Series. To download the source code for this part, visit Routing...

Read More

Creating Vue.js Client Side – Preparing Project and Project Structure Overview

Now, that we have finished the backend (.NET Core Web API), we have to create the frontend part to consume it. In this series, we are going to use Vue.js. It is a pretty new framework but it is already attracting a lot of attention. In a comparison to other popular frameworks, Vue.js is much easier and straightforward to use, so if you are a beginner it should be easier to start with. We are going to build our frontend as an SPA (Single Page Application). That is the type of web application that never reloads because it’s rewriting...

Read More