Click here for Part 1 of this series: Setting up an SPA with Vue.js and Laravel 5.4

For the second part of building the Vuetiful blog I want to integrate Semantic-UI. If you’re not familiar with Semantic, it’s similar to bootstrap, but in my opinion it looks a lot nicer.

You may be wondering why I’m dedicating an entire post to this, and why I didn’t just pull it in via npm at the beginning. That’s because Semantic-UI has a unique setup that takes you through an installation process, so it’s not quite as simple as just dropping it into your project.

If you’re following this project yourself you will need to have gulp installed globally via:

npm install -g gulp

First, with administrator privileges, run npm with the --ignore-scripts flag, otherwise semantic-ui will launch the installer automatically, which can cause problems if you cancel halfway through. So let’s do:

npm install semantic-ui --save-dev --ignore-scripts

Once it’s downloaded navigate to node_modules/semantic-ui:

cd node_modules/semantic-ui

Then run the following to start the installer:

gulp install

Now we just need to follow the installer:

1) Select “Automatic” under the set up options.
2) When asked if the given location is your project folder select “yes”.
3) Type resources/assets/semantic when asked where to put semantic-ui to specify where our semantic folder will be. In Laravel the assets folder makes the most sense.

You should now have a semantic.json file in the root of your project looking something like this:

{
  "base": "resources\\assets\\semantic",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "dist\\",
      "uncompressed": "dist\\components\\",
      "compressed": "dist\\components\\",
      "themes": "dist\\themes\\"
    },
    "clean": "dist/"
  },
  "permission": false,
  "autoInstall": false,
  "rtl": false,
  "components": [..omitted for brevity..],
  "version": "2.2.7"
}

And that’s it, semantic is installed – kind-of. We haven’t actually built the css files yet, so let’s sort that out.

Navigate to resources/assets/semantic and run:

gulp build

Everything will now be outputted to: resources/assets/semantic/dist/semantic.css:

We are actually going to ignore the .js output because it relies on jQuery, so let’s see if we can get by without it in this project, we’ll just have to tweak a few things as we go and maybe look for alternative vue specific plugins if that’s not an option.

I’m obviously not going to move the css file manually (even though it would take seconds) – that’s the kind of crazy talk that will get you banned from any right minded developers Christmas card list! I’m going to have gulp do it for me, so first let’s pull in some dependencies we are going to need.

We will be using SCSS for the non-semantic-ui styles in this project, unfortunately semantic uses LESS, so we will need to build that into css seperately and import it. It shouldn’t matter too much though, we will be working almost entirely with semantic for theming, so it’s likely any global SCSS will be minimal, so let’s pull in gulp-sass:

npm install gulp-sass --save-dev

Now, let’s open up resources/assets/sass/app.scss, once again you will see that Laravel has included bootstrap for us and some .scss variables and a font (which we now don’t need), so let’s just get rid of all that for now and import our semantic.css file. So our app.scss simply has one line of code:

@import "../semantic/dist/semantic";

Notice that we have missed the .css extension off. This is so we get an import of the actual code, we also aren’t worried about the minified version for now, we will sort that out later.

OK, let’s go over to gulp.babel.js in the root of our project and add:

import sass from "gulp-sass";

at the top of our file (below the other import statements) then add our sass task:

gulp.task('sass', function () {
  return gulp.src('./resources/assets/sass/app.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
});

Now let’s run:

gulp sass

Woop! We have now got our semantic css to output to public/css/app.css which we can include in our view; so let’s do that. Open up our view at resources/assets/views/app.blade.php and add the following to the head:

<link href="/css/app.css" rel="stylesheet" type="text/css" />

Now let’s go to our base component in resources/assets/js/components/App.vue and insert the following:

<template>
    <div class="ui center aligned padded grid">
        <div class="column">
            <div class="ui segment">
                <h1>Semantic-UI Setup Complete</h1>
            </div>
        </div>
    </div>
</template>

Run: gulp

and once again fire up the server:

php artisan serve

Open up the browser and navigate to the page (http://localhost:8000) and you should see the correct semantic formatting:

semantic_setup_screenshot

And that’s it! Semantic-ui is fully installed and ready to use. We have now completed the bulk of the setup for our site.

Next, we will finish setting up our dev environment by adding Hot-Reloading to our project.

Advertisements