title: Argument 1 passed to Symfony\Component\HttpFoundation\Response::setContent() with Axios Vue and Laravel 7
body: <p>I am using Laravel 7 with Vue and Axios and I have run across this error but cannot seem to find out why I am getting it. I am using api routes in my Laravel app for contacts, No Controller and One Contacts Model. I have one vue component named Contacts.vue. When trying to fetch the data for the first time, I am met with a 500 internal server error and when I try to visit the route in question, api/contacts, I am met with the following error:</p>
  <pre><code>Argument 1 passed to Symfony\Component\HttpFoundation\Response::setContent() must be of the type string or null, object given, called in C:\laragon\www\contactstore\vendor\laravel\framework\src\Illuminate\Http\Response.php on line 65
  </code></pre>
  <p>To me, as a person new to Laravel, I am not sure how to trace down the problem. Unless there have been changes to axios compared to the way I am trying to use it, I haven't the slightest clue. So, Any help would be greatly appreciated. Thank you.</p>
  <p>Here is the Contact.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Contacts&lt;/h1&gt;
      &lt;form
        action=&quot;#&quot;
        @submit.prevent=&quot;edit ? updateContact(contact.id) : createContact()&quot;
      &gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;&quot;&gt;Name&lt;/label&gt;
          &lt;input
            v-model=&quot;contact.name&quot;
            type=&quot;text&quot;
            name=&quot;name&quot;
            class=&quot;form-control&quot;
            placeholder=&quot;Enter Contact Name&quot;
          /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;&quot;&gt;Email&lt;/label&gt;
          &lt;input
            v-model=&quot;contact.email&quot;
            type=&quot;email&quot;
            name=&quot;email&quot;
            class=&quot;form-control&quot;
            placeholder=&quot;Enter Contact Email&quot;
          /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;&quot;&gt;Phone&lt;/label&gt;
          &lt;input
            v-model=&quot;contact.name&quot;
            type=&quot;text&quot;
            name=&quot;phone&quot;
            class=&quot;form-control&quot;
            placeholder=&quot;Enter Contact Phone Number&quot;
          /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;button v-show=&quot;!edit&quot; type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;
            New Contact
          &lt;/button&gt;
          &lt;button v-show=&quot;edit&quot; type=&quot;submit&quot; class=&quot;btn btn-secondary&quot;&gt;
            Update Contact
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data: function () {
      return {
        edit: false,
        list: [],
        contact: {
          id: &quot;&quot;,
          name: &quot;&quot;,
          email: &quot;&quot;,
          phone: &quot;&quot;,
        },
      };
    },
    mounted: function () {
      console.log(&quot;Contacts Component Loaded...&quot;);
      this.fetchContactList();
    },
    methods: {
      fetchContactList: function () {
        console.log(&quot;Fetching contacts...&quot;);
        axios
          .get(&quot;api/contacts&quot;)
          .then((response) =&gt; {
            console.log(response.data);
            this.list = response.data;
          })
          .catch((error) =&gt; {
            console.log(error);
          });
      },
      createContact: function () {
        console.log(&quot;Creating Contact... &quot;);
        let self = this;
  
        let params = Object.assign({}, self.contact);
  
        axios
          .post(&quot;api/contact/store&quot;, params)
          .then(function () {
            self.contact.name = &quot;&quot;;
            self.contact.email = &quot;&quot;;
            self.contact.phone = &quot;&quot;;
            self.edit = false;
            self.fetchContactList();
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      updateContact: function (id) {
        console.log(&quot;Updating Contact... &quot; + id);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>My Contact model in the Models folder under App</p>
  <pre><code> &lt;?php
      
      namespace App\Models;
      
      use Illuminate\Database\Eloquent\Model;
      
      class Contact extends Model
      {
          //
      }
  
  My api.php for the routes
  &lt;?php
  
  use App\Models\Contact;
  use Illuminate\Http\Request;
  use Illuminate\Support\Facades\Route;
  
  Route::get('contacts', function () {
      return Contact::latest()-&gt;orderBy('created_at', 'desc');
  });
  
  Route::get('contact/{id}', function ($id) {
      return Contact::findOrFail($id);
  });
  
  Route::post('contact/store', function (Request $request) {
      return Contact::create([
          'name' =&gt; $request-&gt;input('name'),
          'email' =&gt; $request-&gt;input('email'),
          'phone' =&gt; $request-&gt;input('phone'),
      ]);
  });
  
  Route::patch('contact/{id}', function (Request $request, $id) {
      Contact::findOrFail($id)-&gt;update([
          'name' =&gt; $request-&gt;input('name'),
          'email' =&gt; $request-&gt;input('email'),
          'phone' =&gt; $request-&gt;input('phone'),
      ]);
  });
  
  Route::delete('contact/{id}', function ($id) {
      return Contact::destroy($id);
  });
  
  Route::middleware('auth:api')-&gt;get('/user', function (Request $request) {
      return $request-&gt;user();
  });
  </code></pre>
  <p>and I am calling it all from within the default welcome.blade.php with</p>
  <pre><code>&lt;contacts&gt;&lt;/contacts&gt;
  </code></pre>
  <p>Again, if you can help me, I would certainly appreciate it. Thank you in advance.</p>