All geek questions in one place

Vuejs js for multiple pages is not for a single page application

I need to create an application using laravel 5.3 and vuejs 2, due to the fact that I need to use two-way binding, and not use jquery.

I need to make representations with click templates. Now I need to use vuejs on every page as below.

resources / Approves / 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 / approves / view / record / 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>

We have Add.vue for create.blade.php, etc .... In Add.vue el: '#add-panel'

This is my app.js. I have already commented on the default code as shown below.

 Vue.component('list', require('./components/List.vue')); Vue.component('add', require('./components/Add.vue')); // const app = new Vue({ // el: '#app' // });

I almost did not check most of the documents and textbooks. But they use single js files. They use components for small elements with a pattern, not just js.

Can vuejs be used this way? Should I use app.js. What is the best way to do this?

+5
source share
2 answers
  • Create your application for each page in separate JS files. It’s good practice to use the same name as the page name to understand where it is.
  • Name your main div the same as the file (fileName.php + assets / js / fileName.js).
  • Use #fileName' as your el`
  • in using the blade server @{{ vue expressions }} so that Blade skips this and allows VueJS to process.

Done. Good luck

+5
source

If you want to sprinkle some vuejs in your files with blades, you have basically two options:

Option number 1

Declare Vue Global 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 the main layout file where the root div has the identifier #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

Option number 2

This is what I am using now, and gives me a lot of 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 use 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 vue components, as always,

 // resources/assets/js/components/foo.vue <script> export default { // the component } </script>
+12
source

Source: https://habr.com/ru/post/1262506/

More articles:


All Articles