How to use Laravel helper functions with Vue?

Question

Iam bulding a multi-page app using Laravel and Vue.Now, for example lets say I want to use some Laravel helper function like {{ trans('messages.welcome') }} inside a Vue component (which is in a separate .vue file) .. how to do that ?

Answer 1

Access the Laravel helper function from your Blade template, passing the result to your Vue component as a prop:

// app.blade.php
<message-component :message="{{ trans('messages.welcome') }}"></message-component>

// MessageComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: [ 'message' ],
}
</script