Usage

#Using Vue Package

To use Laraform, simply import in your main javascript file and install it with Vue.use():

// ./path/to/main.js

import Vue from 'vue'

import Laraform from 'laraform' // <- Community package
// import Laraform from '@laraform/laraform' // <- Preimum package

Vue.use(Laraform)

const app = new Vue({
  el: '#app'
})

Alternatively if you'd rather use require instead of import you can do so by requiring the .default of Laraform package:

// Community package:
const Laraform = require('laraform').default

// Preimum package:
const Laraform = require('@laraform/laraform').default

#Import SCSS

Make sure you import your desired theme's SCSS to your main .scss file:

// ./path/to/main.scss

@import '~laraform/src/themes/bs4/scss/theme.scss'; // <- Community package
// @import '~@laraform/laraform/src/themes/bs4/scss/theme.scss'; // <- Premium package

// ...

#Creating a Form

As a next step let's create a form, preferably in your components/forms directory:


// ./path/to/components/forms/MyFirstForm.vue

<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        hello_world: {
          type: 'text',
          label: 'Hello',
          default: 'World',
        }
      }
    })
  }
</script>
Note that Laraform is a mixin available globally, so you do not need to import it separately.

Now add this component to your main javascript file:

// ./path/to/main.js

import Vue from 'vue'

import Laraform from 'laraform' // <- Community package
// import Laraform from '@laraform/laraform' // <- Preimum package

import MyFirstForm from './path/to/forms/MyFirstForm'

Vue.use(Laraform)

const app = new Vue({
  el: '#app',
  components: {
    MyFirstForm, // using ES6 shorthand
  }
})

After compiling your CSS and Javascript you'll be able to use the MyFirstForm component in your HTML, which will render the form we've described:

<!-- ./path/to/index.html --->

<html>
  <head>
    <!-- ... --->
    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
  <body>
    <div id="app">
      <my-first-form></my-first-form>
    </div>

    <script src="/js/app.js"></script>
  </body>
</html>

Result:

#Using Laravel Package

After you've succefully installed the Laravel package of Laraform you can start using it right away. There's no need to register its service provider or an alias because it's done automatically by Laravel.

#Configuration

Publish Laravel Configuration

First of all publish Laraform's config file with:

php artisan vendor:publish

Choose: Laraform\LaraformServiceProvider.

Adjust Frontend Configuration

Once published, it's recommended to configure the frontend module so that it points to the now existing backend endpoints:

// ./path/to/main.js

import Vue from 'vue'

import Laraform from 'laraform' // <- Community package
// import Laraform from '@laraform/laraform' // <- Preimum package

Laraform.config({
  endpoints: {
    process: '/laraform/process',

    // Only required for full version
    elements: {
      trix: {
        attachment: '/laraform/trix-attachment'
      }
    },
    validators: {
      active_url: '/laraform/validator/active_url',
      exists: '/laraform/validator/exists',
      unique: '/laraform/validator/unique',
    },
  }
})

Vue.use(Laraform)

const app = new Vue({
  el: '#app'
})

#Creating a Form On The Backend

Now let's create a class at app/Forms directory (or whatever location you prefer) and extend it from Laraform:

// app/Forms/MyFirstForm.php

<?php

namespace App\Forms;

use Laraform;

class MyFirstForm extends Laraform
{
  public $schema = [
    'hello_world' => [
      'type' => 'text',
      'label' => 'Hello',
      'default' => 'World'
    ]
  ];
}

Pass this class to the view file using app():

// routes/web.php

Route::get('/', function () {
  return view('welcome', [
    'form' => app('App\Forms\MyFirstForm')
  ]);
});
Using app() is required because the form's constructor has quite a few dependencies which are automatically resolved this way. If you wish to inject dependencies use boot() method.

Now we only have to render the form in our index.blade.php:

<!-- resources/views/index.blade.php --->

<html>
  <head>
    <!-- ... --->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
  <body>
    <div id="app">
      {!! $form->render() !!}
    </div>

    <script src="/js/app.js"></script>
  </body>
</html>

This will render the form's Vue component, which will render the form:

Learn more about creating more advanced forms on the backend here.