ToDo List in Vue.Js and Laravel Tutorial

Oh dear goodness. So I went and did the following tutorial after my pet adoption app. I wanted to do a web store instead of this, but this used Laravel and the web store app uses Firebase… and I already know some pHp so I figured this will be an easier intro to connecting the backend and front end.

While it’s a good tutorial, this one was a bear, and while I now feel stronger for wrestling a bear, I also feel I really didn’t need this frustration… even if I learned a great deal.

So my main problem was the versioning: the tutorial is meant for Laravel 8.x, but, due to a mistake in path definition of php, my Composer installed laravel 5.4.x without me noticing. As a consequence, and the routing instructions had a new syntax that didn’t work here. However I also installed Wamp, not postman, so I couldn’t test (or didn’t know how to test) my Laravel routes until I did more than half of the front end. So I went back, re-installed Composer in order to switch to php 7.x and did it all over again (ok yeah, I copied the edited files, sure). Note, after the re-install, on Windows, you need to reboot.

You want to make sure your pHp path is pointing to a folder containing pHp v7.x

But there were plenty other problems, so here’s a list of what I ran into and how I’ve solved it.

Laravel and Mysql DB creation

Once Composer is installed and pointed to a php 7.x version, open the console and first check your php -v. If it’s below 7, Composer still isn’t working right.
When you get it OK, you can proceed to:

composer create-project --prefer-dist laravel/laravel myprojectname

To check your laravel version, go to your project folder (mine was C:\vue\laraveltodotwo) and find the following file: C:\vue\laraveltodotwo\vendor\laravel\framework\src\Illuminate\Foundation\Application.php

Search through the file and find the following line:

If your laravel version isn’t 8.x, check again your php version. You can try forcing the laravel version:

composer create-project laravel/laravel="8.*" laraveltodotwo

After that, cd into project and

php artisan serve

Ok, that done, I had to remind myself how to set the mysql database up – it’s been a while. After finding mysql console in WAMP, I first went and set up my root password:

mysql> use mysql;
mysql> update user set authentication_string=password('NEWPASSWORD') where user='root';
mysql> flush privileges;
mysql> quit
Where NEWPASSWORD is the new password to be used.

That done, I went to phpMyAdmin because I’m a GUI dog and created a new user with their own password. I also gave the new user, codinghusky, full rights on the new laraveltodo database I created.

Connecting Laravel to DB and populating the DB tables

To connect Laravel to the Database, the .env variable has to be modified. This part is in the tutorial but I’ll put it here for my own future reference.
The code is below, also modify the App name in the first line of this file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveltodo
DB_USERNAME=codinghusky
DB_PASSWORD=myPassWord

Then, give the console:

php artisan make:model Item -m

creates C:\vue\laraveltodotwo\database\migrations\2021_03_06_202222_create_items_table.php

In this, create a schema for the item. This actually defines structure of the database table for this thing we’ll be saving in it:

Schema::create('items', function (Blueprint $table) { 
  $table->increments('id'); 
  $table->string('name'); 
  $table->boolean('completed')->default(false); 
  $table->timestamp('completed_at')->nullable(); 
  $table->timestamps(); 
});

Once this is ready, run:

php artisan migrate

this should create the database table with the name Item and assigned fields; but on my system, it of course throws an error. I was happily able to find the solution on:
https://stackoverflow.com/questions/42244541/laravel-migration-error-syntax-error-or-access-violation-1071-specified-key-wa

What I did was to open the database.php file inside config dir/folder. I edited:

'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',

to

'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',

then ran the command again to create the db. This doesn’t work because some tables were already created in the db, so I went into phpMyAdmin, deleted them manually, and then it worked.

Laravel Routing

Next step in the tutorial was to create the Controller. Thank goodness the command worked OK:

php artisan make:controller ItemController --resource

Following the tutorial, I edited the following files to create routes and finish backend.
C:\vue\laraveltodotwo\app\Http\Controllers\ItemController.php
C:\vue\laraveltodotwo\routes\api.php

I still didn’t find how to test it with Wamp, and I didn’t want to install Postman on top because of my sluggish laptop; so I went down to Vue. I actually now know more about Vue than Laravel, so this was the easy part.

Vue Installation & Hot Reloading

So I went to my project folder install vue stuff, and I also added bootstrap-vue because I absolutely prefer it to regular bootstrap used in the tutorial (saved me writing the css).

npm install
npm install vue
npm install vue bootstrap bootstrap-vue

After that went mercifully well, I did

npm run hot

So of course thatdidn’t wokr and it threw an unresolved item error for <template> in my api.vue. Oh boy. So after some googling, I learned that my vue was too sexy fior my C:\vue\laraveltodotwo\webpack.mix.js ; so I modified it as follows:

mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
        //
]);

And then I ran an array of commands that… somehow rebuild the whole project I suppose and run it in dev:

npm i vue -D
npm i vue-loader -D 
npm i vue-template-compiler -D
npm install
npm run dev

I found this in a forum post at https://stackoverflow.com/questions/65009751/laravel-vue-you-may-need-an-appropriate-loader-for-template-tags . After that it worked fine and I was able to use the npm run hot no problem.

exceeept… Vue didn’t recognize my axios.

The final problem was created by myself: as I opted to use bootstrap-vue instead of regular bootstrap, I went and removed the require(‘./bootstrap’) line from my app.js. Ha, turns out that file loads axios…

So this is what my app looked like, and, shockingly, finally got to work. Except the picture, I couldn’t get it to insert a picture (it keeps trying to get it off the server) so I just gave up.

So, after some mix ups with events, my app finally worked as intended. Whew.

This felt much harder than it should’ve been due to things not covered in the tutorial (versioning) and, I suspect, changes done to Laravel since the tutorial was made. I am aware that resolving all of these issues made me a better programmer, but right now I’m a little too bruised to have spent so much time (extended to 3 days) to create something this simple. And I’m not quite sure I got the event emitters correct, I still have some glitches with reloading.

But I am going to move on and do an app with Firebase next. Since I’m learning, I think I want to see new things about backend more than learn a certain backend. This is because I somehow opted for vue + quasar as front end, but I’m still a little lost about the backend.

Plus, the tutorial I found is very recent (only a few days old!) and I am hoping not to stumble into a plethora of compatibility issues.

Sadly the app is a Twitter clone, and I despise that thing but… I’ll get over it.