Menu
I need to build an application using laravel 5.3 and vuejs 2, because I need to use two-way binding rather than use jquery.
I need to set up the views with blade templates. Then, I need to use vuejs in each page as mentioned below.
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> There is Add.vue to create.blade.php etc... In Add.vue el: '#add-panel'
This is my app.js. I already commented default code like follows.
Vue.component('list', require('./components/List.vue')); Vue.component('add', require('./components/Add.vue')); // const app = new Vue({ // el: '#app' // }); I hardly checked most of documentations and tutorials. But they use a single js file. They use components for small elements with template, not only js.
Is it possible to use vuejs this way? Do I need to use app.js. What is the best way to do this?
228
Vue. js has become one of the leading frameworks for building single-page applications.
📖 Rule Details. This rule require component names to be always multi-word, except for root App components, and built-in components provided by Vue, such as <transition> or <component> . This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.
VueJS is primarily used to build web interfaces and one-page applications. In saying that, it can also be applied to both desktop and mobile app development thanks to the HTML extensions and JS base working in tandem with an Electron framework – making it a heavily favoured frontend tool.
If you want to sprinkle a bit of vuejs within your blade files you have basically two options:
Declare global Vue components
Example
// 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' }); create a main layout file where the root div has an id of #app
// layout.blade.php <html> <header></header> <body> <div id="app"> @yield('content') </div> </body> </html> Finally in your views:
//some-view.blade.php @extends('layout') @section('content') <foo :prop="{{ $someVarFromController }}"></foo> @endsection This is what I am currently using, and gives me more flexibility actually
// in laravel built in app.js file const app = new Vue({ el: '#app', components: { Foo: require('./components/Foo.vue'), Bar: require('./components/Bar.vue') } }); In the layout file you will be using vuejs dynamic components
<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> In your views:
//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 And finally you can create the vue components like you always would
// resources/assets/js/components/foo.vue <script> export default { // the component } </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
