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
Then run the following to start the installer:
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”.
resources/assets/semantic when asked where to put
semantic-ui to specify where our semantic folder will be. In
assets folder makes the most sense.
You should now have a
semantic.json file in the root of your project looking something like this:
And that’s it, semantic is installed – kind-of. We haven’t actually built the css files yet, so let’s sort that out.
resources/assets/semantic and run:
Everything will now be outputted to:
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
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:
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:
at the top of our file (below the other import statements) then add our sass task:
Now let’s run:
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>
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:
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.