laravel - spa - Vuejs js para varias páginas, no para una sola aplicación de página
laravel vue spa (2)
Necesito construir una aplicación usando laravel 5.3 y vuejs 2, debido a que necesito usar enlace bidireccional en lugar de usar jquery.
Necesito hacer vistas con plantillas de hoja. Ahora necesito usar vuejs en cada página como se menciona a continuación.
resources / asserts / js / components / List.vue
<script>
const panel = new Vue({
el: ''#list-panel'',
name: ''list'',
data: {
message: ''Test message''
},
methods: {
setMessage: function(){
this.message = ''New message'';
}
}
})
</script>
resources / asserts / views / post / index.blade.php
<div id="panel" class="panel panel-default">
<div class="panel-heading">Posts</div>
<div class="panel-body">
<p>{{ message }}</p>
<button v-on:click="setMessage">SET</button>
</div>
</div>
Tiene Add.vue para crear.blade.php, etc. En Add.vue el: ''#add-panel''
Esta es mi aplicación.js. Ya comenté el código predeterminado de la siguiente manera.
Vue.component(''list'', require(''./components/List.vue''));
Vue.component(''add'', require(''./components/Add.vue''));
// const app = new Vue({
// el: ''#app''
// });
Apenas revisé la mayoría de las documentaciones y tutoriales. Pero usan archivos js individuales. Usan componentes para elementos pequeños con plantilla, no solo js.
¿Es posible usar vuejs de esta manera? Debería usar app.js. ¿Cuál es la mejor manera de hacer esto?
- Crea tu ''aplicación'' para cada página en archivos JS separados. Una buena práctica sería usar el mismo nombre que el nombre de la página para que quede claro a dónde pertenece.
- Nombra tu div principal igual que el archivo (fileName.php + assets / js / fileName.js).
- Use
#fileName'' as your - en blade usa
@{{ vue expressions }}para permitir que Blade omita esto y permita que VueJS maneje eso.
Hecho. ¡Buena suerte!
Si desea espolvorear un poco de vuejs dentro de sus archivos blade, tiene básicamente dos opciones:
Opción 1
Declarar componentes globales de Vue
Ejemplo
// in laravel built in app.js file
Vue.component(''foo'', require(''./components/Foo.vue''));
Vue.component(''bar'', require(''./components/Bar.vue''));
const app = new Vue({
el: ''#app''
});
crea un archivo de diseño principal donde el #app root tiene un ID de #app
// layout.blade.php
<html>
<header></header>
<body>
<div id="app">
@yield(''content'')
</div>
</body>
</html>
Finalmente en tus puntos de vista:
//some-view.blade.php
@extends(''layout'')
@section(''content'')
<foo :prop="{{ $someVarFromController }}"></foo>
@endsection
Opcion 2
Esto es lo que estoy usando actualmente, y me da más flexibilidad en realidad
// in laravel built in app.js file
const app = new Vue({
el: ''#app'',
components: {
Foo: require(''./components/Foo.vue''),
Bar: require(''./components/Bar.vue'')
}
});
En el archivo de diseño, usará los componentes dinámicos de vuejs
<html>
<header></header>
<body>
<div id="app">
@if (isset($component))
<component :is={{ $component }} inline-template>
@endif
@yield(''content'')
@if (isset($component))
</component>
@endif
</div>
</body>
</html>
En tus puntos de vista:
//some-view.blade.php
@extends(''layout'', [''component'' => ''foo''])
@section(''content'')
// all the vue stuff available in blade
// don''t forget to use the @ symbol every time you don''t want blade to parse the expression.
// Example: @{{ some.vue.propertie }}
@endsection
Y finalmente puedes crear los componentes vue como siempre lo harías
// resources/assets/js/components/foo.vue
<script>
export default {
// the component
}
</script>