Vue.js – The Progressive JavaScript Framework

Here is the link – https://laravel.com/docs/5.4/frontend#writing-javascript

When the build is ready, add app.js from the public folder to your blade.php page’s footer

Issues:

If you are getting an error saying the components not found, it means your script is executing before the document is ready

Make sure you have added app.js script at the end of the page

Adding new component (similar to ‘example’ component given with Laravel):

Components:

Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute.

Create a new component in resources/components called Greeting.vue

Add your bootstrap element inside template element

Create an instance of ‘greeting’ component in app.js

Add the following to app.js

Vue.component('greeting', require('./components/Greeting.vue'));

execute ‘npm run dev’ to rebuild app.js

Add <greeting></greeting> element to your blade.php page

You should be able to see the Greeting.vue template appear on the page

camelCase vs. kebab-case

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

Vue.component(‘child’, {

// camelCase in JavaScript

props: [‘myMessage’],

template: ‘<span>{{ myMessage }}</span>’

})

<!– kebab-case in HTML –>

<childmy-message=“hello!”></child>

Again, if you’re using string templates, then this limitation does not apply.

Adding a Vue message to the page: (Declarative rendering)

add the following to the app.js page

new Vue({
el: '#example',
data: {
message: 'Hello Vue.js!'
}
});

add the example element to your blade.php page

@{{message}}

You won’t need ‘@’ to show the message if you are not using Vue.js in Laravel

Middleware provides convenient mechanism for HTTP requests entering your application. For example, Laravel includes a middleware that verifies the user of your application is authenticated. If the user is not authenticated, the middleware will redirect the user to the login screen. However, if the user is authenticated, the middleware will allow the request to proceed further into the application.