Skip to content

Style Guide

Script Setup

When using composables, we need to use the setup() method inside the Options API.

The setup() method should only be used to expose composables to the Options API.

Use setup() method to expose composables

<script>
export default {
    setup() {
        const { data } = useMyComposable();

        return {
            data,
        };
    },
};
</script>

Passing props from Blade to Vue

  • Always process rich props (objects, arrays) through the @js directive.
  • For consistency, use @js for boolean props as well.

Do not use @json directive, because it will require us to use single quotes in Blade templates.

<my-component
    :rich-data="@js($object)"
    :boolean-flag="@js($boolean)"
    :number="@js($number)"
/>

Do not inline rich props

<my-component
    :rich-data="{{ $object }}"
/>

Using v-html

We have the vue/no-v-html ESLint rule enabled. It’s advised to avoid using the v-html directive, however, if it is absolutely necessary, then feel free to disable the rule using the eslint-disable-next-line vue/no-v-html comment.

<!-- eslint-disable-next-line vue/no-v-html -->
<div v-html="safeHtml"></div>

Checking if a property exists

OK

const hasProp = property in object;

Avoid

const hasProp = object.hasOwnProperty('property')