twill: Custom Vue component forms in admin [form.blade.php] (block hack) is not rendered

Hi, I have a … well, critical issue after updating to 2.0

I need on some modules a total custom Vue component formfield in order to make special forms (some sort of repeater but with very specific and custom specs). It is not a repeater though.

I had those Vue components directly “injected” into the form.blade.php template, as there was no way to add custom specific formFields at that time, so I followed a kinda ‘hacky’ process someone told me on Spectrum chats.

Example of what I have right now:

@extends('twill::layouts.form')

@section('contentFields')
    @formField('input', [
        'name' => 'title',
        'label' => 'Quiz title',
        'maxlength' => 100
    ])
    @formField('input', [
        'name' => 'points_correct',
        'label' => 'Points per success',
        'maxlength' => 3,
        'default' => 10
    ])
    @formField('input', [
        'name' => 'points_miss',
        'label' => 'Points per failure',
        'maxlength' => 3,
        'default' => 3
    ])
    @formField('browser', [
        'label' => "Journey quiz group",
        'name' => 'journey',
        'moduleName' => 'journeys',
        'routePrefix' => 'travessies-i-trivial',
        'max' => 1
    ])
    @formField('browser', [
        'label' => "Play related to quiz",
        'name' => 'play',
        'moduleName' => 'plays',
        'routePrefix' => 'obres-critiques-festivals',
        'max' => 1
    ])
    <a17-block-quizzes :quiz-question-data="{{ $questionsData }}"></a17-block-quizzes>
@stop

Since I updated to last Twill version, those custom components dissapeared!!! 😨

I’ve been trying to run php artisan twill:blocks and then npm run twill-build but unsuccessful. Seems that the custom component is not rendered on the view, as looking at the HTML source code, it appears the <a17-block-quizzes> tag instead of the rendered component.

Now the backend is unusable, as those components were crucial for some sections of the website.

How can I roll back to the ‘hacky’ behavior? How can I add my custom formfields that were working before?

Any manual solution? I will modify Twill core and add it to my own fork if there’s no more solution to this.

I chose Twill months ago as a good CMS thinking it could be flexible, customizable and able handle a complex site, but the work, effort and issues I’m putting into this project means a 10 fold dedication instead of saving time… anyway at this point I have no way to rollback, so I have to fix this at all costs 😞

Any ideas??

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 21 (11 by maintainers)

Most upvoted comments

When working in Twill directly I use npm run lint --fix.

It should be possible to run something like that on your own files.

Thank you!

Exactly, a little trouble but get them back but a much better setup in the long run, and I’m sure this thread will be helpful to others.

About the linting, I’m sure you should be able to fix most of your issues automatically with the --fix option of Vue CLI/Eslint.

The root of the dev server doesn’t serve anything, try: http://localhost:8081/twill-manifest.json (if 8081 is still the port you’re getting out of php artisan twill:dev). You can add the --noInstall option too to avoid waiting for npm installations each time you restart it

Ahh… Okay, yes. Now http://localhost:8081/twill-manifest.json is serving the .json file correctly.

But when I access to http://admin.mysite.local it still complains about not finding the manifest file.

UPDATE: Okay, we’re getting closer. I found what was going on. All had to do with Docker.

This is an issue between what the php-fpm docker container “sees”. Obviously localhost was not working because wasn’t pointing to the node dev container. Now I put the IP of the container where I’m running twill:dev and is working.