Twill

by putting them in your `resources/views` directory, under a `vendor/twill` folder. All Laravel packages allow you to do this.

Which library does twill use for the front end classes? I see `<nav class="header__nav">`

no library, it's vanilla css. If you're wondering why the underscores, this is BEM, a CSS class naming convention.

I see twill uses atomic design in the front end.

Hello, i have a problem with svg images,  it uploads in medias  but it doesn't show up

'glide' => [
        'original_media_for_extensions' => ['svg'],
    ],

Can you share the url of that broken thumbnail?

http://localhost:8001/storage/uploads/909f37d3-ea0c-490c-a59c-33871e84da1d/passport-esteso.svg

if i try the url i get the error 404 not found

did you link Laravel's storage to your public folder? doesn't look like it

did you change anything else in Twill's configuration regarding the media library? The other images are rendered by glide so they don't need the storage link

what is your .env configuration regarding the media library?

check your filesystem to see where the SVG is in the storage folder. And check if your storage folder is simlinked correctly in your public folder

Was wondering how can I connect a vue component with a blade form of twill.

<@913727228515352608> try http://localhost:8001/uploads/909f37d3-ea0c-490c-a59c-33871e84da1d/passport-esteso.svg

Hi <@910193698053160980> can you explain more what you're trying to do?

I am trying to make an axios call in a form of twill.

So the user enters a number and after clicking a button it sends him data.

ok so you want a button to do that. you can either add inline js in your form.blade.php using the `extra_js` Blade stack (using @push), or create a Vue component that is added to Twill's build when you run `php artisan twill:build`

https://gist.github.com/pboivin/19d49cbb3c0a6c5c06469117597cc0f7

So I can use whatever twill vue component as <a17-new-component></a17-new-component>

And what does it mean with @section('contentFields') ?

I don't think folders are explicitly supported for custom components. Not sure what your question is about @section. See https://gist.github.com/pboivin/19d49cbb3c0a6c5c06469117597cc0f7#use-the-new-component

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

@section('contentFields')
    <a17-hello-world name="World"></a17-hello-world>
@stop
```

In the Vue component I write 123 and nothing shows. I have two contentField.

`@section('contentFields')
    <a17-new-vue-component name="New"></a17-new-vue-component>
@stop`

And this in vue
`<template>
    
    <div>
        Hello {{ name }}
    </div>
</template>

<script>
/* eslint-disable */

export default {
    props: ['name']
}
</script>`

because i got an error when i used php artisan twill:build

npm run watch is not going to rebuild Twill assets

Ok, looks like I used the no install the first time, this is why I got an error.

but still, even when I build it I don't get any Hello message.

where did you put the Vue component and what is its filename?

I put it in components folder and the filename is NewVueComponent.vue

where is your components folder? the full path

`/var/www/html/website/resources/js/components/NewVueComponent.vue`

And I use this component inside the file:
`/var/www/html/website/resources/views/admin/siteSettings/form.blade.php`

Where I write:
`@extends('twill::layouts.form', ['contentFieldsetLabel' => 'Impostazioni',])

@section('contentFields')
    <a17-new-vue-component name="New"></a17-new-vue-component>
@stop`

By default the component should be in `resources/assets/js/components`

see https://github.com/area17/twill/blob/2523336ce7387799395bb4c2363435b6870b77cf/config/twill.php#L183

try to follow the tutorial a bit closer, it has everything you need