Using Vue components in Laravel

Question

I'm having some trouble using Vue components in Laravel Blade files. Laravel 5.8 comes with Vue.js by default and I created a component and registered it globaly in bootstrap.js file.

Now I'm trying to pass some props to the component from the blade view. Here's the whole blade view:

@extends('admin._base')

@section('title', 'Producers')

@section('sidebar')
    @parent
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <entity-table :header-props="tHeaders"></entity-table>
        </div>
    </div>
@stop
<script>
    export default {
        data() {
            return {
                tHeaders: ['first name', 'last name', 'email']
            };
        }
    }
</script>

I'm getting these errors:

Uncaught SyntaxError: Unexpected token export

and also:

Property or method "tHeaders" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Vue components work fine in blade files if I don't try to pass any props to them but I can't get the scripts section to work.

Edit:

Here's my package.json file:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/preset-env": "^7.3.1",
        "axios": "^0.18",
        "babel-loader": "^8.0.5",
        "bootstrap": "^4.1.1",
        "bootstrap-v4-rtl": "^4.1.1-1",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.5.22",
        "webpack": "^4.29.0"
    }
}

I also have a .babelrc file that contains:

{ "presets": ["@babel/env"] }

Sasan Farrokh Sasan Farrokh · Accepted Answer · 2019-03-01T18:40:14

You can't put ES5/ES6 syntax inside Laravel blade files.

There is 2 solutions to use vuejs inside laravel blade files:

Use pure browser javascript like below
```
var app = new Vue({
   data: {
      tHeaders: ['first name', 'last name', 'email']
   }
})
```
Ensure you first loaded transpiled version (through laravel mix) of bootstrap.js file.
Use laravel/mix to transpile es6 js files to browser versions

Read docs for further information: Laravel Mix

Using Vue components in Laravel

1 Answers