Dudas con estructura para la combinación laravel y vue


#1

Hola a todo el mundo. Es mi primera intervención en el foro, y aunque en esta ocasión pido ayuda, espero poder colaborar más adelante ayudando a otros.

Tengo una duda, que llevo tiempo intentando solucionar, y es mas una forma de trabajar, que una duda concreta, y quería saber como hacéis el resto para estructurar todo.

El caso es que estoy en una aplicación web con laravel, que tiene diversas vistas, como listado de contactos, creación, listado de perfiles, creación de perfiles, etc… es decir, varias páginas blade separadas, y a cada una quiero aportarle comportamiento con vue.

Las opciones que se me ocurren son dos:

  • creo, por ejemplo, una pagina de creación de perfiles(blade), creo un componente vue llamado como la página, y ahí pongo todo el contenido en template, y el código en el script. Y después en cada archivo blade, solamente llamo al componente.
  • otra opción que se me ocurre es hacer varias instancias vue, cada uno con un el: diferente, y tener ahí el código para interactuar con los elementos de cada pagina, es decir; 1 archivo app.js con varias instancias de vue.

Son las dos que se me ocurren. Si me aportáis algo que no se me ocurrió o que desconozco, lo mirare encantado. Gracias a todos.


#2

Hola Alex,

suponiendo que para las vistas que describes el SEO no es importante (parecen ser vistas detras de una contraseña) yo te sugeriria la primera opcion, o almenos en parte.

Crea un componente Vue para cada vista el cual sea totalmente independiente, es decir pueda recibir los datos como props y pueda ser instanciado en cualquier ambiente. De ese modo podras trabajar en su desarrollo e incluso testearlo en un ambiente controlado.

A partir de alli, puedes jugar y decidir que te conviene mas para iniciar el componente en Laravel. Podrias por ejemplo exportar y registrar los componentes globalmente y en cada vista añadir un pequeño html script que Inicie Vue en el elemento principal renderizado por PHP pasandole los datos (props) en el proceso. Algo asi:

<div id="app"></div>
<script>
new Vue({
  render (h) {
    return h('mi-componente-para-esta-vista', {
      props: <?php echo json_encode($data, JSON_HEX_APOS) ?>
    })
  }
}).$mount('#app')
</script>