Wallogit.com
2017 © Pedro Peláez
Add support for Vuetify in Symfony
VuetifyBundle adds support for various VuetifyJS components in Symfony, (*1)
Note: This bundle does NOT add the VuetifyJS library to your project. Vuetify should already be included in your project, and a basic Vue instance should be instantiated. See the quick start guide of Vuetify to get started, or follow the Adding Vuetify instructions., (*2)
You can install the bundle using Composer:, (*3)
$ composer require solidworx/vuetify-bundle
After the process has completed, you need to enable the bundle:, (*4)
<?php
// app/AppKernel.php
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = [
...
new SolidWorx\VuetifyBundle\SolidWorxVuetifyBundle(),
...
];
...
}
}
If you are using Symfony 4 with Flex, then the bundle should automatically be registered., (*5)
The bundle can be configured in your app/config.yml file. See the Configuration Reference for possible configuration values., (*6)
If you do not already have Vuetify installed in your application, then you can follow the these instructions:, (*7)
// Using yarn $ yarn add vuetify // Using NPM npm install vuetify --save
Register Vuetify inside your main application entrypoint:, (*8)
import Vuetify from 'vuetify'; Vue.use(Vuetify);
This bundle comes with assets that provide some additional functionality., (*9)
To include the compiled JS on your page, you can add the following to your templates:, (*10)
<script src="{{ asset('bundles/solidworxvuetify/js/vuetify-bundle.min.js') }}">
Note: Remember to run the bin/console assets:install command, (*11)
If you use webpack (or webpack-encore) you can import the module directly, (*12)
import VuetifyBundle from 'vendor/solidworx/vuetify-bundle/src/Resources/assets/js'; Vue.use(VuetifyBundle);
You also need the lodash-es package which needs to be installed manually., (*13)
$ yarn add lodash-es // or $ npm install lodash-es
Note: The lodash-es package is included by default in vuetify-bundle.min.js, so it's not necesarry to install it when using the compiled script., (*14)
VuetifyBundle comes with a Symfony form theme that you can include which will render all the form inputs as Vuetify form components., (*15)
twig:
form_themes:
- '@SolidWorxVuetify/Form/fields.html.twig'
In order to use a switch input for radio buttons, you can use the switch option that is part of the RadioType form type:, (*16)
<?php $builder->add( 'agree', RadioType::class, [ 'switch' => true ] );
This will render the radio button with the v-switch component., (*17)
When using the 'widget' => 'single_text' option in the DateType form type, the input will be transformed to a date picker component., (*18)
VuetifyBundle comes with a month picker form input, which will render a date picker with only a month selection:, (*19)
<?php
use SolidWorx\VuetifyBundle\Form\MonthType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
class MyFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add(
'month',
MonthType::class,
[
'widget' => 'single_text'
]
);
}
}
The JS comes with a form-collection component that will allow you to add multiple items when using Symfony's Form Collection, (*20)
You can use the v_alert twig function to display alert messages. The function takes three arguments, message, type and options., (*21)
This function can be used with Symfony's flash messages:, (*22)
{% for label, messages in app.flashes %}
{% for message in messages %}
{{ v_alert(message, label) }}
{% endfor %}
{% endfor %}
Or standalone:, (*23)
{{ v_alert('Display some important information', 'info', {'outline': true}) }}
| Option | Type | Description |
|---|---|---|
| color | string | Applies specified color to the control |
| dismissible | bool | Specifies that the Alert can be closed. The v-model option must be set when this is true in order for the alert to be disissed |
| icon | string | Designates a specific icon |
| mode | string | Sets the transition mode |
| origin | string | Sets the transition origin |
| outline | bool | Alert will have an outline |
| transition | string | Sets the component transition. Can be one of the built in transitions or your own |
| v-model | string | Applies a Vue model to the alert. When setting dismissible to true, then this value is required |
You can also set default configuration options for the alerts. Configuration can be either global, or you can set options per alert type. See the Configuration Reference for more information, (*24)
Below is the full configuration reference:, (*25)
vuetify:
alert:
# Sets global default options for each alert. Options per alert type can be overwritten in the `types` config.
default:
# Specifies that the Alert can be closed. The `v-model` option must be set when this is `true` in order for the alert to be dismissed
dismissible: false
# Alert will have an outline
outline: false
# Applies specified color to the control
color: null
# Sets the transition mode
mode: null
# Sets the component transition. Can be one of the built in transitions or your own
transition: null
# Sets the transition origin
origin: null
# Designates a specific icon
icon: null
# Sets the default config per alert type. This will overwrite any global config for a specific alert type
types:
success:
dismissible: false
outline: false
color: null
mode: null
transition: null
origin: null
icon: null
info:
dismissible: false
outline: false
color: null
mode: null
transition: null
origin: null
icon: null
error:
dismissible: false
outline: false
color: null
mode: null
transition: null
origin: null
icon: null
warning:
dismissible: false
outline: false
color: null
mode: null
transition: null
origin: null
icon: null
Add support for Vuetify in Symfony
MIT
Add support for Vuetify in Symfony
MIT