Cannot render custom block to Twill Admin View with VueJS

[sebapusch]

I am trying to add a custom block on twill 2.5.3 as described here:

https://spectrum.chat/twill/tips-and-tricks/adding-a-custom-block-to-twill-admin-view-with-vuejs~028d79b1-b3cd-4fb7-a89c-ce64af7be4af

I did everything as described there, except using

@twillBlockCompiled('true')
@twillBlockComponent('a17-block-custom-bulk-edit')
@twillBlockTitle('CustomBulkEdit')

instead of adding these configurations in the twill.php config file.

I am unable to see the computed file, instead I see my <a17-block-component> tag in the HTML, as well as these properties

@twillBlockCompiled('true')
@twillBlockComponent('a17-block-custom-bulk-edit')
@twillBlockTitle('CustomBulkEdit')

rendered as standard text.

What am I doing wrong?

[pboivin]

Hi @sebapusch,

Here's a short tutorial that can complement the one you mentioned: https://gist.github.com/pboivin/19d49cbb3c0a6c5c06469117597cc0f7
There's an example of a custom Vue.js block in part 4.

This will depend on your use case but there's a chance you don't actually need to create a Vue.js block. You'll have the same flexibility with a Blade block and a basic Vue.js component.

[sebapusch]

Thank you @pboivin, I will check it out as soon as possible.

The reason for wanting to create a vue.js block is that I want to override the current bulkEdit block in the listing page so I can add a custom action and for that I need to access the selected Ids which are stored in the vue storage.

Maybe there is a better way for doing this, any suggestions are welcomed. Thanks again.

[sebapusch]

So apparently what I did not understand is that you can only use custom vue components inside form layouts. What I was trying to do was using it inside a free layout.

Does anyone have a suggestion on how to manipulate the default bulk edit behavior without building everything from scratch?

And what do you think about adding custom bulkEdit actions in the future? I think it would be very helpful.

Last, what I need to do is bulk export, I saw from the code it is under todo, does someone have any info on that?

[bruno-de-yan]

Have you had success with this @sebapusch ?

I am seeing as well instead of seeing my component rendering. I have used tabs and currency_custom_field as the Twill shows on its documentation, but even with these examples I have had success.

cc @pboivin

[pboivin]

Hello @bruno-de-yan,

Here's a simple trick to make custom components available in "Custom CMS Pages" :

1. Find the free.blade.php layout in your vendor directory:

vendor/area17/twill/views/layouts/free.blade.php

2. Copy this file into your project, at this location:

resources/views/vendor/twill/layouts/free.blade.php

3. Make 2 small changes to your copy:

   On line 7:

   <link href="{{ twillAsset('main-form.css')}}" rel="preload" as="script" crossorigin/>
   

   And on line 31:

   <script src="{{ twillAsset('main-form.js') }}" crossorigin></script>
   

This will load the full JS bundle including your custom components.

I've used this on a few projects without any problems.

Best,

P.