Search Results for: Turbo

590 search results for Turbo

Sort By

Code

Learn Symfony 6

Doctrine, Symfony 6 & the Database

Forever Scroll with Turbo Frames

            Copy Code

                            Show All Lines

                        54 lines
            |
            templates/vinyl/browse.html.twig
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            {% block body %}
        
                Show Lines

                                                    // ... lines 4 - 27
                            
                    <turbo-frame id="mix-browse-list">
        
                        <div class="row">
        
                            {% for mix in pager %}
        
                Show Lines

                                                    // ... lines 31 - 45
                            
                            {% endfor %}
        
                Show Lines

                                                    // ... lines 47 - 48
                            
                        </div>
        
                    </turbo-frame>
        
                Show Lines

                                                    // ... lines 51 - 52
                            
            {% endblock %}

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

            Copy Code

                        18 lines
            |
            assets/controllers.json
        
            {
        
                "controllers": {
        
                    "@symfony/ux-chartjs": {
        
                        "chart": {
        
                            "enabled": true,
        
                            "fetch": "lazy"
        
                        }
        
                    },
        
                    "@symfony/ux-turbo": {
        
                        "turbo-core": {
        
                            "enabled": true,
        
                            "fetch": "eager"
        
                        }
        
                    }
        
                },
        
                "entrypoints": []
        
            }

See Code Block in Script

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Streams: Reusing Templates

Hey @Ryan-L! Fantastic! I've heard it said that there's a bit of a gradient with Turbo: A) Turbo Drive: maximum dev happiness + nice UI B) Turbo Frames: medium dev happiness (due to more complex than Drive ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Thank you for your reply ! I had both files with these values: ``` cat assets/controllers.json { "controllers": { "@symfony/ux-turbo": { "turbo-core": { "enabled ...

Thomas-D

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Hey @Xavier-V! Ah, thanks for posting the detailed code! I can see what I forgot. In `package.json`, add this to `devDependencies`: ``` "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets", ``` This is ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Fancier Toasts: Auto-close & Fading

... own stimulus controllers, etc... On the import of the JS entry file into my HTML, I added, for both the back and front parts, a data-turbo-track="reload" attribute so that the browser reloads the page when I switch ...

labfordev

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Turbo Frames

... I'm using Turbo frames, and I get weird behavior with the back button on the browser. I use turbo-advance to change the URL, and that works well enough, but when I go back, the navbar that isn't in the main frame stops ...

Brandon

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Hey @Fabrice! We'll talk a bit in this tutorial about how Turbo is great, but how you may not be able to enable Turbo Drive immediately in a legacy application. But, Turbo is 2 other pieces (Frames & Drive) and those ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Hey @Xavier-V! Sorry you're having problems - that's no fun! I think it's ok that your assets folder is not in a standard place. This error comes from this line, while trying to initialize Turbo: https://github.com ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Turbo Drive

Hey |mention:76903| Are you trying to use Turbo with EasyAdmin? I'm afraid EasyAdmin has not added support for Turbo yet, perhaps they will in the future. Cheers! ...

MolloKhan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Hi, I installed turbo and I get this error: `DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry` ...

ethnerom

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Using a Full HTML Page to Populate a Frame

Hi Ryan. As far as I understood turbo frame is not SEO friendly right? By the way great Stimulus and Turbo tutorials. ...

Alcides

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Reloading When JS/CSS Changes

This does seem to be the case: https://discuss.hotwired.dev/t/turbo-always-reloading-when-asset-js-css-is-added-with-turbo-track/3179/5 ...

Vafilor

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Broadcasting Frontend Changes on Entity Update/Remove

            Copy Code

                            Show All Lines

                        40 lines
            |
            templates/broadcast/Review.stream.html.twig
        
                Show Lines

                                                    // ... lines 1 - 29
                            
            {% block remove %}
        
                <turbo-stream action="replace" target="product-review-{{ id }}">
        
                    <template>
        
                        {{ include('product/_review.html.twig', {
        
                            review: entity,
        
                            isRemoved: true
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

                        66 lines
            |
            templates/checkout/checkout.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                    <div class="row">
        
                        <aside class="col-12 col-lg-4">
        
                            <turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 18 - 66

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Adding a "Read More" Ajax Frame

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/cart/cart.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                        <aside class="col-12 col-md-4 order-2 order-md-1">
        
                            <turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 16 - 32

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Frames Look for & Load the Matching Frame

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/cart/cart.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                        <aside class="col-12 col-md-4 order-2 order-md-1">
        
                            <turbo-frame id="cart-sidebar" src="{{ fragment_uri(controller('App\\Controller\\CartController::_cartFeaturedProduct')) }}">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 16 - 32

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Frames: Lazy Frames

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/cart/cart.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                        <aside class="col-12 col-md-4 order-2 order-md-1">
        
                            <turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 16 - 32

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Reloading When JS/CSS Changes

            Copy Code

                            Show All Lines

                        33 lines
            |
            config/packages/webpack_encore.yaml
        
                Show Lines

                                                    // ... lines 1 - 6
                            
                # Set attributes that will be rendered on all script and link tags
        
                script_attributes:
        
                    defer: true
        
                    'data-turbo-track': reload
        
                link_attributes:
        
                    'data-turbo-track': reload
        
                Show Lines

                                                    // ... lines 13 - 33

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

AJAX Modal!

            Copy Code

                            Show All Lines

                        26 lines
            |
            templates/voyage/new.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <turbo-frame id="modal">
        
                <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
                Show Lines

                                                    // ... lines 8 - 22
                            
                </div>
        
                </turbo-frame>
        
            {% endblock %}

See Code Block in Script

8 9 10 11 12

Show Lines	// ... lines 1 - 2
	{% block body %}
Show Lines	// ... lines 4 - 27
	<turbo-frame id="mix-browse-list">
	<div class="row">
	{% for mix in pager %}
Show Lines	// ... lines 31 - 45
	{% endfor %}
Show Lines	// ... lines 47 - 48
	</div>
	</turbo-frame>
Show Lines	// ... lines 51 - 52
	{% endblock %}

	{
	"controllers": {
	"@symfony/ux-chartjs": {
	"chart": {
	"enabled": true,
	"fetch": "lazy"
	}
	},
	"@symfony/ux-turbo": {
	"turbo-core": {
	"enabled": true,
	"fetch": "eager"
	}
	}
	},
	"entrypoints": []
	}

Show Lines	// ... lines 1 - 29
	{% block remove %}
	<turbo-stream action="replace" target="product-review-{{ id }}">
	<template>
	{{ include('product/_review.html.twig', {
	review: entity,
	isRemoved: true
	}) }}
	</template>
	</turbo-stream>
	{% endblock %}

Show Lines	// ... lines 1 - 10
	<div class="row">
	<aside class="col-12 col-lg-4">
	<turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
	Loading...
	</turbo-frame>
	</aside>

Show Lines	// ... lines 18 - 66

Show Lines	// ... lines 1 - 10
	<aside class="col-12 col-md-4 order-2 order-md-1">
	<turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
	Loading...
	</turbo-frame>
	</aside>
Show Lines	// ... lines 16 - 32

Show Lines	// ... lines 1 - 6
	# Set attributes that will be rendered on all script and link tags
	script_attributes:
	defer: true
	'data-turbo-track': reload
	link_attributes:
	'data-turbo-track': reload
Show Lines	// ... lines 13 - 33

Show Lines	// ... lines 1 - 4
	{% block body %}
	<turbo-frame id="modal">
	<div class="m-4 p-4 bg-gray-800 rounded-lg">
Show Lines	// ... lines 8 - 22
	</div>
	</turbo-frame>
	{% endblock %}