PHPackages                             protonemedia/laravel-splade-core - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. protonemedia/laravel-splade-core

AbandonedArchivedLibrary[Templating & Views](/categories/templating)

protonemedia/laravel-splade-core
================================

A package to use Vue 3's Composition API in Laravel Blade.

4.0.1(2y ago)433875[2 issues](https://github.com/protonemedia/laravel-splade-core/issues)[1 PRs](https://github.com/protonemedia/laravel-splade-core/pulls)MITPHPPHP ^8.1

Since Oct 18Pushed 2y ago8 watchersCompare

[ Source](https://github.com/protonemedia/laravel-splade-core)[ Packagist](https://packagist.org/packages/protonemedia/laravel-splade-core)[ Docs](https://github.com/protonemedia/laravel-splade-core)[ GitHub Sponsors](https://github.com/pascalbaljet)[ GitHub Sponsors](https://github.com/protonemedia)[ RSS](/packages/protonemedia-laravel-splade-core/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (36)Used By (0)

\[Experimental\] Laravel Splade Core
====================================

[](#experimental-laravel-splade-core)

A package to use Vue 3's Composition API in Laravel Blade.

[![Latest Version on Packagist](https://camo.githubusercontent.com/21021654085c072ccbfef383f2da474fb5b66f88618037f60fcd7073ee09d8c0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f70726f746f6e656d656469612f6c61726176656c2d73706c6164652d636f72652e737667)](https://packagist.org/packages/protonemedia/laravel-splade-core)[![GitHub Tests Action Status](https://github.com/protonemedia/laravel-splade-core/actions/workflows/run-tests.yml/badge.svg?branch=main)](https://github.com/protonemedia/laravel-splade-core/actions/workflows/run-tests.yml)[![Splade Discord Server](https://camo.githubusercontent.com/bb582537c364d8509b8871a8747c5f49fec8af5d76a835165cace7412fdf129a/68747470733a2f2f646362616467652e76657263656c2e6170702f6170692f7365727665722f71474a344d6b4d51576d3f7374796c653d666c6174267468656d653d64656661756c742d696e766572746564)](https://discord.gg/qGJ4MkMQWm)[![GitHub Sponsors](https://camo.githubusercontent.com/a9a10827982b147076aab0cd09be0a20d4d399524e2c5ee708f739fde1926d38/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73706f6e736f72732f70617363616c62616c6a6574)](https://github.com/sponsors/pascalbaljet)

> ⚠️ This package is abandoned: [Thoughts on Splade: I took a week off to look around and reflect.](https://protone.media/en/blog/thoughts-on-splade-i-took-a-week-off-to-look-around-and-reflect)

Sponsor Splade
--------------

[](#sponsor-splade)

We sincerely value our community support in our endeavor to create and offer free Laravel packages. If you find our package beneficial and rely on it for your professional work, we kindly request your support in [sponsoring](https://github.com/sponsors/pascalbaljet) its maintenance and development. Managing issues and pull requests is a time-intensive task, and your assistance would be greatly appreciated. Thank you for considering our request! ❤️

Why is this experimental?
-------------------------

[](#why-is-this-experimental)

Although this package comes with an extensive test suite, it's important to note that it's in an experimental stage. It's a new package, and I haven't used it in production yet. Currently, I'm using the [original Splade v1](https://splade.dev) package for my production needs. However, in 2023 Q4, I plan to integrate this new package into two new projects. It's also worth mentioning that I haven't yet confirmed full compatibility between this package and all the features of the original Splade package.

What does this have to do with the existing Laravel Splade package?
-------------------------------------------------------------------

[](#what-does-this-have-to-do-with-the-existing-laravel-splade-package)

Laravel Splade currently offers a ton of features:

- Use Blade to build Single-Paged-Applications
- 20+ interactive components
- Extensive Form and Table components
- Modals, Slideovers, Toasts, SEO, SSR, and more

While this is great and tremendously helps to build SPAs with Laravel, it also makes it harder to maintain and extend the package. This is why I decided to split Splade into multiple packages:

- Splade Core: This package. It only contains the core functionality to use Vue 3's Composition API in Blade. No pre-built components. No markup. No CSS. Just the core functionality.
- Splade Navigation: The SPA and Navigation components from the original Splade package (Modals, Slideovers, Toasts, SEO, SSR, etc.)
- Splade UI: The UI components from the original Splade package, excluding the Form and Table components.
- Splade Form: The Form components from the original Splade package.
- Splade Table: The Table components from the original Splade package.

Requirements
------------

[](#requirements)

- PHP 8.1
- Laravel 10
- Vue 3.3
- Vite 4.0

Features
--------

[](#features)

- Automatic installer for new projects
- Use Vue 3's Composition API in Blade templates
- Support for Blade Components and Blade Views
- Call Blade Component methods from the frontend
- Refresh Blade Components from the frontend without reloading the page
- Use Blade Props as Vue Props
- Tap into the Js/Vue ecosystem from within Blade templates

Limitations
-----------

[](#limitations)

- Inline Blade Components are not supported (where the template is defined in the component class and not in a separate `.blade.php` file).

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require protonemedia/laravel-splade-core
```

### Automatic Installation

[](#automatic-installation)

For new projects, you may use the `splade:core:install` Artisan command to automatically install the package:

```
php artisan splade:core:install
```

This will install the JavaScript packages, create a root layout and a demo component, and add the required configuration to your `app.js` and `vite.config.js` files. After running this command, you may run `npm install` to install the JavaScript dependencies and then run `npm run dev` to start Vite.

```
npm install
npm run dev
```

### Manual Installation

[](#manual-installation)

First, you should install the companion JavaScript packages:

```
npm install @protonemedia/laravel-splade-core @protonemedia/laravel-splade-vite
```

Splade Core automatically generates Vue components for all your Blade templates. By default, they are stored in `resources/js/splade`. You don't have to commit these files to your repository, as they are automatically generated when you run Vite. To initialize this directory, run the following command:

```
php artisan splade:core:initialize-directory
```

In your main Javascript file (`app.js`), you must instantiate a new Vue app and use the Splade Core plugin. Following Laravel's convention, the `app.js` file is stored in `resources/js`, so you may pass the relative `./splade` path to the plugin options:

```
import { createApp } from 'vue/dist/vue.esm-bundler.js'
import { SpladeCorePlugin } from '@protonemedia/laravel-splade-core'

createApp()
    .use(SpladeCorePlugin, {
        components: import.meta.glob('./splade/*.vue', { eager: true }),
    })
    .mount('#app')
```

In your `vite.config.js` file, you must add the `laravel-splade-vite` plugin. Make sure it is added before the `laravel` and `vue` plugins:

```
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import spladeCore from '@protonemedia/laravel-splade-vite'

export default defineConfig({
    plugins: [
        spladeCore(),
        laravel({
            ...
        }),
        vue({
            ...
        }),
    ],
})
```

Lastly, in your root layout file, you must create a root element for your Vue app, and you must include a script tag for the Splade templates stack. This must be done above the `#app` element:

```

        My app
        @vite("resources/js/app.js")

         @stack('splade-templates')

            {{ $slot }}

```

Usage with Blade Components
---------------------------

[](#usage-with-blade-components)

You may use the default `make:component` Artisan command to generate a Blade Component:

```
php artisan make:component MyComponent
```

In the Blade template, you may use a `` tag to make your component reactive:

```

const message = ref('Hello Vue!')
const uppercase = computed(() => message.value.toUpperCase())

```

Besides running the Vite dev server, you don't have to do anything else. The component will be automatically compiled and registered as a Vue component.

### Echo syntax

[](#echo-syntax)

Blade and Vue use the same curly brace syntax to render variables. This means that you can't use the `{{ message }}` syntax in your template to render a Vue variable. Technically, this is because the Blade compiler comes before the Vue compiler. There are two ways to solve this:

Use the `v-html` or `v-text` directive:

```

```

Or, use the `@` symbol to escape the curly braces:

```
@{{ uppercase }}
```

### Composition API imports

[](#composition-api-imports)

In the first above, we used the `ref` and `computed` functions from Vue's Composition API. Splade Core automatically imports these functions for you. Here's a list of all the functions that are automatically imported:

- `computed`
- `inject`
- `nextTick`
- `onActivated`
- `onBeforeMount`
- `onBeforeUnmount`
- `onBeforeUpdate`
- `onDeactivated`
- `onErrorCaptured`
- `onMounted`
- `onUnmounted`
- `onUpdated`
- `provide`
- `reactive`
- `readonly`
- `ref`
- `watch`
- `watchEffect`
- `watchPostEffect`
- `watchSyncEffect`

### Attribute Inheritance

[](#attribute-inheritance)

Just like regular Blade Components, you may use the `$attributes` variable to inherit attributes passed to the component. This also works for `v-model`:

Here's the template of the `` component:

```

const form = ref({
    framework: 'laravel',
})

```

And here's the template of the `` component:

```

    Laravel
    Tailwind
    Vue

```

#### Inheritance on Components with a script tag

[](#inheritance-on-components-with-a-script-tag)

If the component you're passing attributes to has a `` tag, the attributes are passed as Vue props to the root element of the component. If you want to pass the attributes to a different element, you may use the `v-bind="$attrs"` directive:

```

```

Splade Core automatically detects the custom directive.

### Element Refs

[](#element-refs)

You may use the `$refs` variable to access element refs. This doesn't naturally work in Vue 3's Composition API, but it was great in Vue 2, so I decided to add it back in Splade Core:

```

onMounted(() => {
    const creditcardEl = $refs.creditcard;
});

```

### Tapping into the Vue ecosystem

[](#tapping-into-the-vue-ecosystem)

Using libraries and packages from the Js/Vue ecosystem is easy. Here's an example of using [Flatpickr](https://flatpickr.js.org):

```

import flatpickr from "flatpickr";

const emit = defineEmits(["update:modelValue"]);

onMounted(() => {
    let instance = flatpickr($refs.date, {
       onChange: (selectedDates, newValue) => {
            emit("update:modelValue", newValue);
        },
    });

    instance.setDate(props.modelValue);
});

```

Note that you can use `props.modelValue` without defining it. Splade Core automatically detects the usage of `modelValue` and adds it to the `props` object.

### Calling methods on the Blade Component

[](#calling-methods-on-the-blade-component)

If your Blade Component has a `public` method, you may call it from the template, either in the script or in the template. Splade Core detects the HTTP Middleware of the current page and applies it to subsequent requests. The only thing you have to do is add the `Vue` attribute to the method:

```