A Laravel UI preset for UIkit and Vue.js

Overview

New version: torrix/laravel-uikit

This package is for Laravel 6, and is no longer maintained. Please use the Laravel 8 version


UIkit frontend UI preset for Laravel 6

Out of the box, Laravel 6 ships with a UI preset for Bootstrap and Vue.js to make getting your website front-end up and running simple.

Laravel + UIkit = 😍

Although Bootstrap is very popular, I prefer YOOtheme's front-end framework UIkit. It's modern, clean, well-thought-out, and modular. I've used it for just about every project I've worked on in the last few years, for both websites and web applications, from tiny single-page landing sites, to massive web applications with thousands of users.

This repository extends Laravel UI with an additional preset for UIkit.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See Deployment for notes on how to deploy the project on a live system.

Prerequisites

To begin, you'll need a fresh install of Laravel 6. Adding this to an existing project is not recommended and may cause issues. For full instructions on installing Laravel, refer to the Laravel installation docs, but something like the following will get you up and running:

composer global require laravel/installer

laravel new mysite

php artisan serve

Your development site will be served at http://localhost:8000.

Installing this preset

To turn the base Laravel install into a UIkit skeleton site, follow the steps below.

  1. Include both Laravel UI and this repository into your composer dependencies:
composer require laravel/ui
composer require torrix/laravel-ui-uikit
  1. Run the artisan command to install the preset into your Laravel install. It will overwrite welcome.blade.php, so do not run this on established projects with changes made to that file. You can run the command with or without the --auth flag; this will determine whether or not the login/register routes & views are generated.
php artisan ui uikit --auth
  1. Finally, run NPM to download UIkit, and build your assets using Laravel Mix:
npm install && npm run dev

Developing with UIkit

To get started in UIkit, read their excellent docs. The examples and tests provided should give you all the help you need. To get an idea of what UIkit is capable of, I highly recommend the KickOff starter templates for inspiration.

To start customising UIkit to your own needs, take a look in app.scss. In there, you will find the standard UIkit imports, and by way of a simple example, I've changed the default blue primary colour to a nice purple shade, just to show what's possible in almost no time at all. Try changing it to another colour, and then running npm run dev to rebuild the CSS, and see the changes to your site.

Handy tip

Whilst developing your site, running Laravel Mix in watch mode makes it easy to make changes and quickly see their results:

npm run watch

Deployment

When deploying to a live server, remember to build your assets in production mode for smaller, faster downloads:

npm run prod

Built With

  • Laravel - The awesome PHP framework that makes all of this worthwhile.
  • Laravel UI - The default Bootstrap preset Laravel ships with, and this project is based on.
  • UIkit - The beautiful, powerful front-end framework that you'll be delighted to build your next Laravel project with!

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

  • Matt Fletcher - This UIkit preset - Torrix
  • Taylor Otwell - The original Bootstrap preset - Laravel UI

License

This preset is based upon and extends Laravel UI, and is therefore open-source software licensed under the MIT license - see the LICENSE.md file for details

You might also like...
This template should help get you started developing with laravel 9 + Vue 3 in Vite + Tailwind

simple-project This template should help get you started developing with laravel 9 + Vue 3 in Vite + Tailwind

List of 77 languages for Laravel Framework 4, 5, 6, 7 and 8, Laravel Jetstream , Laravel Fortify, Laravel Breeze, Laravel Cashier, Laravel Nova and Laravel Spark.

Laravel Lang In this repository, you can find the lang files for the Laravel Framework 4/5/6/7/8, Laravel Jetstream , Laravel Fortify, Laravel Cashier

A Laravel 8 and Livewire 2 demo showing how to search and filter by tags, showing article and video counts for each tag (Polymorphic relationship)
A Laravel 8 and Livewire 2 demo showing how to search and filter by tags, showing article and video counts for each tag (Polymorphic relationship)

Advanced search and filter with Laravel and Livewire A demo app using Laravel 8 and Livewire 2 showing how to implement a list of articles and tags, v

Laravel Podcast is Laravel 5.5 web app that enables you to manage RSS feeds for your favorite podcasts and listen to the episodes in a seamless UI and User Authentication.
Laravel Podcast is Laravel 5.5 web app that enables you to manage RSS feeds for your favorite podcasts and listen to the episodes in a seamless UI and User Authentication.

Laravel Podcast is Laravel 5.5 web app that enables you to manage RSS feeds for your favorite podcasts and listen to the episodes in a seamless UI and

Nebula is a minimalistic and easy to use administration tool for Laravel applications, made with Laravel, Alpine.js, and Tailwind CSS.

Nebula Nebula is a minimalistic and easy to use administration tool for Laravel applications, made with Laravel, Alpine.js, and Tailwind CSS. Nebula m

Laravel package to generate and to validate a UUID according to the RFC 4122 standard. Only support for version 1, 3, 4 and 5 UUID are built-in.

Laravel Uuid Laravel package to generate and to validate a universally unique identifier (UUID) according to the RFC 4122 standard. Support for versio

An opinionated support package for Laravel, that provides flexible and reusable helper methods and traits for commonly used functionality.

Support An opinionated support package for Laravel, that provides flexible and reusable helper methods and traits for commonly used functionality. Ins

Laravel blade directives and php helpers for serverside rendered content, based on browser window size WITHOUT css. Requires Livewire and AlpineJS.

Laravel Livewire Window Size and Breakpoints Laravel blade directives and php helpers for server side rendered content, based on browser window size W

Sweetalert and Toaster notifications for Laravel livewire with support for tailwind and bootstrap.

Larabell Integrate livewire with sweetalert. Installation How to use Sweetalert Toast Available configuration Installation composer require simtabi/la

Releases(v3.3.0)
  • v3.3.0(Feb 1, 2020)

  • v3.2.3(Nov 16, 2019)

  • v1.1.0(Sep 29, 2019)

    The package has been rewritten to work as a macro package, built on top of Laravel UI, rather than a wholesale fork of the parent project.

    I am grateful to @Naoray for their assistance in this: https://github.com/laravel/ui/issues/20

    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Sep 15, 2019)

Owner
Torrix
Torrix
An open source Laravel Soundboard with Admin Panel CRUD (Create Read Update Delete) built on Laravel, Bootstrap, and Vue.js

Laravel Soundboard An open source Laravel Soundboard with Admin Panel CRUD (Create Read Update Delete) built on Laravel 5.8, Bootstrap 4, Vue.js, Boot

Jeremy Kenedy 24 Oct 28, 2022
MediaDB is a web-based media streaming service written in Laravel and Vue.

MediaDB (API) MediaDB is a web-based media streaming service written in Laravel and Vue. The nginx-vod-module is used for on-the-fly repackaging of MP

François M. 53 Sep 3, 2022
Rebuild the todo website with Laravel and Vue

Lara-Todo This is a course that I took at Udmey, to create a todo website with Laravel and Vue.js Start First we need to download and setup Composer.

AmirH.Najafizadeh 6 Jul 31, 2022
An application with Laravel, Vue, Redis and Mysql

<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%2

André Franca 3 Dec 16, 2021
Awes.io // boilerplate based on Vue, Nuxt, TailwindCSS plus Laravel as a backend. 🤟

Platform for Interactive Business Applications 10x faster to create than the traditional way • 3x increase application experiences • 60% decrease in d

Awes.io 753 Dec 30, 2022
Laravel Sanctum, Websockets & Vue [SPA]

Laravel Auth [SPA] 2021-07-15_22-24-33.mp4 composer require laravel/ui php artisan ui:auth Laravel Sanctum composer require laravel/sanctum php art

Kritish Dhaubanjar 6 Jun 1, 2022
Reactive Form Builder for Vue.js with Laravel Support

Dynamic Form Builder for Laravel with Vue.js Create even the most complex forms with ease, using two-sided validation, eloquent, nested elements, cond

Laraform 340 Dec 31, 2022
Projeto em Laravel para práticar redis, cache e vue js

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Nicolas Pereira 1 Nov 26, 2021
Authentication for SPA (Laravel Sanctum + Vue.js)

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Damir 0 Dec 30, 2021
Vueform Laravel + Vue 3 + TailwindCSS 3 Boilerplate

Vueform Laravel + Vue 3 + TailwindCSS 3 Boilerplate Last tested with Laravel 8.75. Installation Clone this repo with: git clone https://github.com/vue

Vueform 1 Feb 26, 2022