Introduction to double

In Web Development

Introduction to double - read the full article about Vue Js update, Web Development and from MoriturHostis on Qualified.One

Share

Tweet

MoriturHostis
Youtube Blogger

Hi! Welcome to the introduction video for double.

In this video, Id like to quickly explain what double is and how you can use it to create dynamic web applications with laravel and vue.js.

Double is a new way to write your controller code.

And that makes it really easy to use Laravel together with Vue.js.

It provides deep integration between Laravel and Vue.js by providing a vite and webpack plugin, as well as a Vue.js plugin.

Ive already setup an example project by following the installation instructions for double.

You can follow along by visiting this URL.

Here you see the app.vue file in which I added the users component.

Its wrapped in a suspense component, which is important for double to work.

Lets start by adding some functionality to our users.php file.

Instead of this array, we return users from our database.

If we open the page in the browser, we will still see the static data, but once we refresh, we see that the database is currently empty.

Next, we create a method to add a new user to the database.

This is the same code we would usually write in a Laravel controller.

When using double, we write that code in a PHP file which lives right next to the vue component.

Usually, we would also have to add a route to Laravels route file.

And create an API with a library like Axios in our frontend.

With double we get all of that automatically.

So here, in our storeUser method, we just create a new user object, set the name, email and password.

We also have to hash the password so that we dont store the password in plaintext in our database.

Finally, we save the user.

This is now all the PHP code we need to write when using double.

Now, we will create a simple HTML form to use our newly created method.

While I do this, you can have a look at the setup function where you see, that double is already used.

The path that is given to the useDouble function reflects the path to the users.php file.

The last thing we have to add to our setup function is a createUser method.

Here, we call the storeUser method that will in turn call the method we defined in our users.php file.

Note, that we automatically got typescript autocompletion for the storeUser method.

That works, because the webpack plugin analyzed our PHP code in the background, detected, that we added this method earlier and updated our typescript type definition automatically.

Now, we just have to finish our template.

We add a few inputs for the data we need for the user and also a submit button.

Were finally ready, to try our user management page in the browser.

We enter some dummy data, and once we click on submit, expect that the data gets stored to the database.

As we called double.refresh() in our createUser method, double will re-fetch the data from the server so that we see our newly created user.

I actually forgot to change username to name and the id to the email, so, we will do that now and sure enough we now see the real user data.

We also forgot to clear the form after submitting the user, so we can just do that here and then we can try again with some new dummy data and sure enough, everything looks perfect! I hope you enjoyed this little demonstration on how easy double makes it to use Laravel together with Vue.js.

Im really excited about all the possibilities and workflow improvements this new approach provides.

Double is in early alpha right now, with all of the major functionality finished.

I hope to get lots of feedback from you on what you think about double and which feature you would like to see in the future.

Please use GitHub discussions to get in contact.

You can find the link in the video description.

See you soon!