How to implement a Laravel project supporting multiple Vue components?

A

Alexey Sklyarov2020-11-29 12:15:11

Vue.js

Alexey Sklyarov, 2020-11-29 12:15:11

There is a Laravel project, which is a simple static site with posts output. For this project, normal authorization is used. Now I need to implement user notifications (Vue component), sending and displaying comments on a post (Vue component), a personal account for a specific group (Vue component). Everything else is static for me.

The question is: how do vue and laravel connect in such cases ? According to the standard, one Vue object is created, into which all components, vuex, etc. are connected. But in this case, I will have to mount all this to a single #app container, in which, in theory, the WHOLE site should be located. that is, in this case, everything must already be implemented on VUE, but such a task is not worth it.

I would like to just display a Vue component for comments on the post page (actually it will be one Vue object), another Vue component for user notifications, and so on. But in this case, tinsel will be obtained from the creation of several objects:

var comments = new Vue({
  el: '#comments',
  data: {
    message: 'Hello Vue!'
  }
})

var notifications = new Vue({
  el: '#notifications,
  data: {
    message: 'Hello Vue!'
  }
})

It is also not clear how these components should work correctly with authorization, since they should be available only to authorized users, plus various conditions associated with the user role are possible. Just implement in jwt component?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

D

Dmitry, 2020-12-03
@dlnsk

Dmitry above wrote everything correctly. And yes, everything is already done for us : https://github.com/laravel/ui
you actually do #app in the layout and Vue renders all the content of your page. That. you can create components and insert them in the required places.
And about access control: who's stopping you from using @if in the blade and not showing components to those who don't need to see them?...

D

Dmitry, 2020-12-01
@DKWLB

Of course, I'm not a super-guru, but for many years now I've been fighting around laravel-vue-nuxt both in bundles and separately.
Now I'm just rewriting an old project using approximately the same system.
It seems to me that you can get by with one div#app in the main layout

<body class="antialiased">
       <div id="app">
      @yield('content')
</div>
        @stack('scripts')
    </body>

, from which the pages of the site already inherit. Just register different components in app.js

const app = new Vue({
        el: '#app',
        router,
        store,
        components: { Homepage}, //здесь все ваши компоненты
    });

And you just insert them in the blades where necessary. In theory, the built-in laravel authorization will be enough, since the routing will be laravel. I struggled with vue / nuxt authorizations - too much new for the last year sanctum, fortify - the devil will break his leg.
I installed a clean lara with simplified breeze authorization.
Again, I repeat, I’m never a guru and I can be wrong