Combining Blade and Vue

I've built a few sites using Laravel (love it)...All laracasts lessons seems to be aimed at using vue to drive the frontend OR blade, but not really both in a real-world way IMHO.

My current project outputs blade/html and uses a wee bit of javascript here-and-there for stuff like form checking/ ajax loading, etc. [not a SPA]

What I can't wrap my head around is how to combine Vue with Blade in an organized, DRY way. In the past I've just thrown the javascript at the bottom of the Blade template. It works with all kinds of Vue warnings and doesn't feel right:

...html...
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            cms_icon: {
                wordpress: 'fab fa-wordpress-simple',
                joomla: 'fab fa-joomla',
                drupal: 'fab fa-drupal',
                shopify: 'fab fa-shopify',
                other: 'fas fa-wrench',
            },
        },
        methods: {
        }
    });
</script>

Where do I put each page's Vue/javascript?

I know about Vue's Single File Components but that seems like a solution for a js-driven site (one in which every page pulls its content via ajax). I'm interested in leveraging mostly blade's @foreach and other control statements. If I move the html over to a Vue Single File Component...then I have to pass in php variables into Vue and then render it out. Not really what I want to do.

I want to render most pages with blade/php and use Vue to handle small tasks, like applying icons. Showing content when clicking, etc.... (all that standard stuff us old timers used to use jquery to do!)

How do I structure this?

thank you

dezineHQ

6 years ago

Level 30

if you doing mostly just reactive/interactive stuff I suggest you look at https://github.com/alpinejs/alpine similar syntax as vue but very straight forward and simple.

Perfect if you rendering everything with blade and you just need a sprinkle of js for interactivity

bionary

6 years ago

Level 6

Thank you for your suggestion... I remember taking a quick look at alpine a few months ago but didn't pursue it because it didn't seem like a framework that would stick around. Why? alpinejs doesn't have its own dedicated website/docs, the training/examples are few and far between. I suppose that's why I skipped right over it.

BUT, it's time to give alpine a second look. It looks like there is no ajax, but I could easily use axios for that, right?

Do you just include all your <script>...js </script> at the bottom of each page?

I'd also be interested how people solve these problems with Vuejs? Maybe they don't. I don't know.

1 like

dezineHQ

6 years ago

Level 30

I use Vue for SPA development.

for small interactions Alpine.js

To handle ajax I now us Laravel/Livewire ..(by the creator of alpine.js) ... try it you will be blown away. You will be able to write your CRUD in a livewire component just as you do in a Laravel Controller and still have the benefits of ajax (no page reloads etc)

bionary

6 years ago

Level 6

I've been playing around with alpinejs for the better part of the day. I love how simple it feels to implement. It feels like I writing native html only for events!...so cool. The documentation and q & a on the web is really limited though. I'm completely stumped on access the alpinejs models within an axios then() function:

 <script>
    function getArticles() {
        let url = "/api/sitemap";
        return {
            articles: [],
            sendForm: function (event) {
                let self = this;

                axios.post(url, {
                    something: 'some stuff',
                })
                .then(  function (response) {
                    console.log(self)// yields Proxy{}    ???????
                    self.articles = response.data.articles;
                });
            }
        }
    }
</script>

The trusty old scoping via let self = this; is not working. (neither did .bind(self) or arrow functions. Do you know how to access alpine's models in this scope?

Thanks

1 like

Please or to participate in this conversation.