I’ll show you how to set up a full-stack VueJS/Laravel app and demo each of the CRUD operations. We’ll use Axios for AJAX, and I’ll also show you strategies for dealing with the tricky UX of this architecture.

In this article you’ll learn how to create a reusable modal component using transitions and slots.

We’ll need a div for the backdrop shade, a div to act as the modal box and some elements to define it’s structure: – – Notice the use of slots?

Let’s set some defaults for the slots, the wrapper elements and the initial CSS to make it look like a basic modal.

Every time a component or an element wrapped by a transition is inserted or removed, Vue will check if the given element has a CSS transitions and will add or remove them at the right time.

First let’s start by adding a transition wrapper component to our modal: – – Now let’s add a transition for the opacity to fade slowly by using the applied classes: – – Now our modal opens and closes smoothly!

How to add Semantic UI to your Vue projectThis tutorial covers how to add Semantic UI (with customizations) to your Vue.js project.This is aimed at Webpack users and targets the latest version of Semantic UI tutorial does not cover anything jQuery related.

If you do want rapid out-of-the box JS functionality I recommend which is a Vue wrapper for Semantic UIand is 100% compatible with this tutorial.The starting point of this tutorial will be the vue-cli webpack-simple can get the full code of this tutorial on github here: LessSemantic UI is powered…

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.npm install less –save-devInstalling Semantic UI (Less distribution)We will be installing the Less-only distribution of…

Instructs webpack to emit the required object as file and to return its public URL.npm install file-loader –save-devConfiguring Semantic UIIn your project’s root, create a new folder called ‘semantic-theme’.

Add the following inside ‘theme.config’:Adapting your Webpack configurationAdapt module rules:Adapt resolve entry:Integrating Semantic UI:Adapt main.js to import Semantic ui:Adapt App.vue:Result:Customizing your themeFrom here on you can follow the official customization guide: the theme’s primary color:Create the following file: the contents of site.variables to the following:GithubIn case you get stuck you can get…

Making React components that can be used in multiple places is not hard.

What is hard is when the use cases differ.

Without the right patterns, you can find yourself with a highly complex component that requires a lot of configuration props and way too many if statements.

With this course, you’ll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.

In this tutorial, I’ll show you how to set up a full-stack Vue & Laravel app and demo each of the CRUD operations.

This method is responsible for retrieving our Cruds from the backend and will target the action of our Laravel controller, thus using the GET endpoint /api/cruds.

In the case of the method, we could update the Crud object in the frontend app instantly before the AJAX call is made, since we already know the new state.

Now that you understand the key points of the architecture, you will be able to understand these last two operations without my commentary: – – As you know, our CRUD operations are asynchronous, and so there’s a small delay while we wait for the AJAX call to reach the server,…

As you can see from the inline style, when the class is added to , it will completely cover the app, adding a greyish tinge and preventing any click events from reaching the buttons and selects: – – The last piece of the puzzle is to toggle the class by…