VDOM Stack (Vue Deno Oak MongoDB) CRUD example

3+

VDOM Stack (Vue Deno Oak MongoDB) CRUD example

In this article, we’ll create the #CRUD application VDOM stack (#Vue #Deno #Oak #MongoDB) application. As a JavaScript developer, you heard about the #MEAN, #MERN and #MEVN stack application. But now it’s time to learn some new technology stack. VDOM stack has capabilities to be popular like other stacks.

VDOM Stack (Vue Deno Oak MongoDB) CRUD example

After this article, you would be able to create your own application with this new #VDOM stack. Let’s move to the implementation now.

I am noob for Deno and What is Oak? 😕

I am really sorry. Okay before going to implementation. Let me allow to give you a brief introduction of this stack application.

What is VDOM Stack?

V stands for Vue 💻

Vue is a front-end framework like Angular or React.

It is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. This framework uses “high decoupling”, allowing developers to progressively create user interfaces (UIs). You can check this article on Vue.

D stands for Deno 🦕

Deno is sibling of Node. You already familiar with Node. Isn’t it?

It is a secure runtime for JavaScript and TypeScript. If you love NodeJS but not his package manager(npm). Then you should give a try to Deno. And I assure you that you’ll love it. Well in side of Deno, it is a secure TypeScript runtime built on V8, the Google runtime engine for JavaScript. We’ll cover all Deno articles here.

O stands for Oak 🐿️

Rival of Express JS. It is a middleware framework for Deno’s http server, including a router middleware. The main architecture of middleware frameworks like oak is, unsurprisingly, the concept of middleware. These are functions which are executed by the application in a predictable order between when the application receives a request and the response is sent. For more about Oak framework.

M stands for MongoDB 🗄️

MongoDB is now untouched technology for developer. But if you never use this database framework. Then you should try this. Instead of storing data in tables of rows or columns like SQL databases, each row in a MongoDB database is a document described in JSON, a formatting language.

If this brief introduction is not enough for you. And want to know this stack in details. Love to hear from your side in comment section below. Well, let’s dive into the article now.

Create Vue project

First of all, you have to install Vue in your system. If it’s already installed. Then skip this step.


You can check your Vue version by run below command.


Well now create a project named frontend by using cli.


Vue - Select Manually select features
Vue – Select Manually select features

I shared a source code on GitHub at last. So, focus on the understanding over the implementation. After all selection, you can run the default Vue application using below code:


Run the Vue application

http://localhost:8080/
http://localhost:8080/

Now install bootstrap for designing.


Now create two folders: router and store inside the src. But why? Just hold this question for some time. Firstly, add bootstrap.min.css inside the main.js.


Now create three files: ContactComponent.vue, CreateComponent.vue and EditComponent.vue.

File Structure of frontend project
File Structure of frontend project
20 + Bonus VSCode Shortcuts for Every developer should know
20 + Bonus VSCode Shortcuts for Every developer should know

For faster development install the Vue VS Code Extension Pack. Search this extension in your VS Code.


Now it’s time to talk about the router which we create earlier.  Create index.js inside the router folder. It is using for routing the application. One minute, have you installed vue-router in this application?

Yes, we’ll install now.


and index.js would be:


Now add the below code in App.vue.


Application look for currently
Application look for currently

Now install the axios by using below code:


Axios is Promise based HTTP client for the browser and node.js.

Now we’re ready to work on CreateComponent.vue


Now form look like
Now form look like

For this part of VDOM Stack series, we worked on the Vue and create a form using bootstrap. Now we’re ready to work on backend and see the magic of Deno in next article.

3+
Summary
VDOM Stack (Vue Deno Oak MongoDB) CRUD example
Article Name
VDOM Stack (Vue Deno Oak MongoDB) CRUD example
Description
In this article, we'll create the CRUD application VDOM stack (Vue Deno Oak MongoDB) application. As a JavaScript developer, you heard about the MEAN.
Author
Publisher Name
Das JS
Publisher Logo