Installation & About
Let's install Kompo. Time is ticking ⏰...

Introduction

Kompo is a full-stack library of components that helps you write, in a matter of seconds, a lot of the redundant things a web application needs, such as: forms, queries and menus

It is a Rapid Application Development framework: it pushes the principle of coding by convetion to the extreme while attempting to give the developer as much flexibility as possible.

Quick Installation

1- Install the PHP package with composer:

composer require kompo/kompo

2- Pick and add a stylesheet to your `<header>`:

<link href="https://unpkg.com/vue-kompo/dist/app.min.css" rel="stylesheet">
<link href="https://unpkg.com/vue-kompo/dist/app-mdol.min.css" rel="stylesheet">
<link href="https://unpkg.com/vue-kompo/dist/app-mdfl.min.css" rel="stylesheet">
<link href="https://unpkg.com/vue-kompo/dist/app-float.min.css" rel="stylesheet">

3- Add the scripts before your closing `</body>` tag:

<script src="https://unpkg.com/vue-kompo/dist/app.min.js">

4- (Optional) To test that everything is working fine, create your first Form:

php artisan kompo:form KompoDemoForm --demo

And render it inside the div with id `#app`.

<div id="app">
   {!! App\Http\Komposers\`KompoDemoForm`::`render`() !!}
</div>
The quick installation tells Vue to mount in id="app". To change that or any other parameter in the installation, you need to build the assets yourself - see below.

Full Installation

Requirements

The requirements for Kompo are:

  • `Laravel 5.6+` application installed on your local server.
  • `composer` to pull the vendor packages.
  • `Node.js` + `npm` to build and pull the Front-End modules.

Back-End setup

Install `kompo/kompo` by running the following terminal command at your project's root folder:

composer require kompo/kompo

Then we take care of the Front-End setup.

Front-End setup

Install the modules

Next, you need to pull the front-end module into your development environment:

npm install vue-kompo

Import the javascript

Once the install process is finished, you should import the javascript modules in your `app.js` . This will import the default bundle into your project and you will be able to use them everywhere in your Vue.js code.

//app.js
window.Vue = require('vue');

//Requiring kompo after Vue has been required
require('vue-kompo');

Import a style

Kompo comes in many different styles. You may check out the different styles in the components page. Once you picked your prefered style, import the related scss code in your `app.scss`.

//app.scss -- Pick your favorite style

@import  'vue-kompo/sass/bootstrap-style';
//@import  'vue-kompo/sass/md-filled-style';
//@import  'vue-kompo/sass/md-outlined-style';
//@import  'vue-kompo/sass/floating-style';
These styles can also be customized globally. Check this page out for more info.

Build the assets

After that just compile the assets.

npm run dev

And reference them in your template.

<!-- header -->
<link href="{{ `mix`('css/app.css') }}" rel="stylesheet">

<!-- scripts -->
<script src="{{ `mix`('js/app.js') }}"></script>

You are now ready to start creating Komponents!

Using with Tailwind

Kompo works really well with Tailwind CSS! You will notice that Tailwind's well-defined classes and utilities really leverage the power of the Komponents based approach.

Be sure to import Tailwind AFTER vue-kompo styles; so that when you set Tailwind classes to Komponents, their default CSS is overriden.
//app.scss

//Kompo's SCSS
@import  'vue-kompo/sass/bootstrap-style';

//Tailwind comes after and is able to override kompo defaults!
@import  "tailwindcss/base";
//...
@import  "tailwindcss/components";
//...
@import  "tailwindcss/utilities";

Since the classes that appear later in the CSS file take precedence, you are able to override kompo's default CSS by adding Tailwind or Bootstrap classes to the component. For example, if you wish to change the default margins, you may append one of Tailwind's classes with the `class` method:

// This will remove kompo's default top margin 
Input::form('Name')->class('mt-0')

About

Open-source & Free

Most of the components are created from scratch. Other more complex ones are cherrypicked, tested and integrated into a standardized system. But all of them are free and open source. The goal is that they continue to improve over time thanks to a combined community effort.

The goal is to continue fine-tuning and enriching the library of components while keeping it free for developers - forever. However, donations are appreciated and will help us spend more of our time improving it.

Feature requests & Bugs

Please report any bugs in the issues tab of our github repo.
We also welcome with open hands PR's for new components (form fields, catalog cards, menu items,...). If a component is approved by enough people from the community, we hope to add it to the library of available components for everyone to use.
You can also write to us at contact@kompo.io for any ideas or suggestions you may have.

Kompo's mission

Improved developer happiness for experienced artisans

By outsourcing the repetitive operations of writing HTML inputs, cards, tables, menus and the usual CRUD instructions, kompo aims to increase developer happiness by allowing him/her to focus on the relevant business logic. The goal is to get to a point where all a developer needs to do is set up the data model, configure the user input settings and see a result right away.

Breaking the barriers: Intuitive coding for beginners

Kompo aims to break the barrier to entry for developers by making code more intuitive to write. It is currently a great starting point for beginners, who want to see results without necessarily going into tedious implementations. We also hope that one day it would be able to help school students who aspire to code, and even kids.

Rapid prototyping: buiding web SPAs as fast as it can get

Whether it is to present a first draft to a client or simply tinkering with one of your ideas for a project, the goal is to offer you the fastest way to have a functional prototype up-and-running. The sooner the end-user tries out, the better the feedback. Less time is wasted in the process and everyone is happy :)

Improve this page

To help us improve our docs, you may submit a PR to our github repo for docs. We really appreciate your contributions, thanks!