Laravel and Vue.js: creating the Mark My Words web app – Part 1

After having lots of fun using Laravel to build Three Good Things, I naturally started looking for other fun projects I could build.

I don’t really watch TV — I prefer to read. At the start of the year I was thinking about new year’s resolutions and decided that whenever I read a word I didn’t know, I would write it down. I quickly discovered that looking up a word and it’s definition was a fairly major interruption to whatever I was reading, especially using mobile to copy+paste into a Google Keep note.

It seemed like a fairly simple thing for an app to do, so I tried to find one. I was surprised to find that most of the vocabulary apps were quite complex. Many wouldn’t allow you to enter words – they would provide their own each day. Some had the feature I wanted, but they were an add-on. I decided this would be perfect for a little Laravel app, and I could use it to learn Vue.js at the same time.

The finished app is available at https://mark-my-words.co – please check it out and let me know what you think!

Getting started with Laravel

I started by installing a fresh copy of Laravel and created the user system with php artisan make:auth.

The first step was to create a text field for the word the user is looking up. I added search_term to Vue’s data object, and set v-model="search_term" on the input.

I created a search function in Vue’s methods  object. This makes a GET request to my API, which in turn queries the Oxford Dictionary’s API for a list of definitions.

So in my routes/web.php I added Route::get('api/search', 'APIController@search');  and used php artisan make:controller APIController  to create a controller that would contain all the API methods. I looked into Laravel’s API Authentication, but it was overkill – I wanted to use the web authentication to handle this – the user is already logged in, so there’s no point in authenticating twice. To take care of this I added:

to app/Http/Controllers/APIController.php.

Getting a word definition

In APIController.php I created a search(Request $request) method. I used Guzzle to send the request to the Oxford Dictionary API.

The code looks like this:

The $word_id is sanitised: trim any spaces, urlencode it, and convert it to lowercase.

Next I had to process the JSON that was returned. Oxford Dictionary returns a LOT of information, so I had to use this unfortunate code to achieve that:

Yep, I know. This just didn’t seem right to me. I asked about it on Stack Overflow and unfortunately there’s not much that can be done to improve it.

After this I trim any trailing periods from the definition and simply return $list;.

Back in resources/assets/js/app.js, here’s the search function that gets triggered when the form is submitted:

There are a few data variables that I haven’t mentioned yet: this.last_search_term is separate from this.search_term  so that it’s doesn’t “re-actively” update when the user edits the input field. this.loading simply shows a loading icon while the search is performed. no_results and show_results tell the app if it should show a “no results found” message, or show the results. app.results_list  shows those results.

Displaying the results

Next let’s have a look at the code to display the results in resources/views/home.blade.php:

To run through the above code, I use v-cloak to hide the block until it’s rendered, because otherwise it shows up when the page loads, and doesn’t look pretty. In my CSS, I use this:

Next is the transition – I wanted the results to slide down when they’re loaded. I normally would have reached for jQuery to do this, but I’m trying to avoid jQuery as it’s an additional library for just a few effects. So instead I used Velocity.js which I import with window.Velocity = require('velocity-animate');  at the top of app.js.

Then in my Vue methods  object I have:

These get triggered by the @enter  and @leave events.

Finally, a user clicks on a definition to save it to their list, which I’ll discuss in Laravel and Vue.js: creating the Mark My Words web app – Part 2.

Have you used Laravel and Vue.js to create a web app? Do you think I could have done any of this better? Please let me know in the comments!