Vue and laravel named routes

You have to define a variable in vue and assign route value on that. For example-

var app = new Vue({
  el: '#your-wrapper',
  data: {
    routeName: "{{route('blog.store')}}"
    .
    .

Now in your form tag, you can use like this way-

 <form method="POST" :action="routeName" @submit.prevent="submitForm">

@tisuchi

This code is in my app.js file

var app = new Vue({
  el: '#your-wrapper',
  data: {
    routeName: "{{route('blog.store')}}"

and i cant move it to my blade file since I am importing js plugins

is there a way to add to the data object from the blade file ?

@mushood

I see..

Than simply you can do this-

 <form method="POST" :action="{{route('blog.store')}}" @submit.prevent="submitForm">

It should work for you.

@tisuchi Would not work either since my from is in a .vue file.

Here is my vue file: https://github.com/Mushood/apilearn/blob/master/resources/assets/js/views/write.vue

my app.js file https://github.com/Mushood/apilearn/blob/master/resources/assets/js/app.js

and my blade file https://github.com/Mushood/apilearn/blob/master/resources/views/spa.blade.php

did you try my previous suggestion?

@tisuchi Yep and I got this error during compilation:

 - invalid expression: Unexpected token { in

    {{route('blog.store')}}

  Raw expression: :action="{{route('blog.store')}}"

Are you using store form in write.vue file? https://github.com/Mushood/apilearn/blob/master/resources/assets/js/views/write.vue

If so, you can easily apply this-

var app = new Vue({
  el: '#your-wrapper',
  data: {
    routeName: "{{route('blog.store')}}"
    .
    .

 <form method="POST" :action="routeName" @submit.prevent="submitForm">

@tisuchi

In my view instance,

routeName:"{{route('blog.store')}}"

its evaluating to the string ""{{route('blog.store')}}""

I see...

What if you think of a environment variable for that and apply like this-

{{ env('BLOGSTORE') }}

In your .env file -

BLOGSTORE=http://localhost/your-project/url-for-blog-store

I see where my problem is,

I am trying to pass a "php variable" to a "js variable"

Even if i set it in an ENV, it would still be the same issue.

Maybe i could set up an ajax request to get the URL. Seems tedious.

Or maybe pass the value in a hidden span and then retrieve it

@tisuchi What do you think?

Either way, I think I have to rethink my workflow

Hi @mushood,

I have been wondering about this same problem in my question here: https://laracasts.com/discuss/channels/vue/blade-usage-in-vue-component-files-best-practiceworkflow

Sending routes and other Laravel helpers via props or hidden methods seems like backwards thinking.

Have you stumbled on any workflow that maintains the power of blade within Vue component files?

@mushood using an ajax request to get the route is a bit like pulling your pants down to fart. especially if it's 1 route.

but if you need to pass it, you could pass it as a prop.

so in your blade file you would have.s

<my-component :route={{route('foo')}}></my-component>

now the issue here is that it doesn't like you are using a component. and that's dead dead simple.

in app.js

Vue.component('my-component', require('./MyComponent.vue')); //globally registered.
const app = new Vue({
    el: '#app'
});

in MyComponent.vue

<template>
    <form :action="this.route">
    <p>{{message}}
    </form>
</template>

<script>
 export default {
     props: ['route'],
     data() {
     return {
         message: ''
         stuff: [],
         
     }
     }

 }

if it's a nested component, i.e. a component inside the component passing routes around is a pain. if so, let me know and I'll show you other options.

I'll usually pass that kind of thing as a prop, or if the Vue file is too deep in then I'll have a hidden element within blade set to that value, and on mounting that component read the value of the element.

Hi @MorganRowse It seems that passing the route as a prop is the way to go for now, as mentioned.

@robrogers3 Haha. You're right. Thank you for the code sample. Really helps out. I'll definitely check out vuex as well.

However, on the project I am working on right now, I am using the vue router. So in my blade, I only have :

      <router-link to="/create">
          <a><button type="button" class="btn btn-success">Create action</button></a>
      </router-link>
.
.
.
<div class="container">
  <router-view></router-view>
</div>

and then all my vue logic is in JS file. So i'm having to hard code my URLs at the moment.

At the same time, as my project is growing, I find the need to have a setup function where I do an ajax request to get the initial information from the server when a router-view is mounted. I'm thinking of simply passing my routes in this function.

Use https://github.com/tightenco/ziggy to get the route() javascript helper.

@robrogers3 adding a colon in a blade file caused template compilation error. Removing a colon solved the problem. Source: https://laracasts.com/discuss/channels/vue/unable-to-pass-a-property-invalid-expression

So: <component :route="{{ route('some-route') }}"></component> became <component route="{{ route('some-route') }}"></component>

@muhammadjavohir :)

what about moving my navigation sidebar from laravel blade to a vue component ? for href I had all named laravel routes, passing one by one as a prop to component would be soooo redundant :D Any advices ? Pass it as an array or smth ?:D

The fart-remark made me fall down my chair in laughter.

Oh man I've been laughing for 10 straight minutes over the fart comment. My wife thinks I'm a lunatic right now!