Vue.js error in laravel

Question

When I try to run the following code in Laravel with vue.js:

<html>
<head>
    <title></title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
    <link href="/css/roboto.min.css" rel="stylesheet">
    <link href="/css/material.min.css" rel="stylesheet">
    <link href="/css/ripples.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2> Locaties </h2>
            </div>
            <data list="{{ json_encode($locations) }}"></data>
        </div>      
    </div>

    <template id="ln-data">
        <ul>
            <li v-for="item in list">@{{ item.name }}</li>
        </ul>
    </template>
<script>
    new Vue({
      el: 'body'
    })  

    Vue.component('data', {
        template: '#ln-data',
        props:['list']
    })
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.common.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>

<style>
.newclient {
    display:none;
}
</style>
</body>
</html>

I receive the following errors in the console:

Uncaught ReferenceError: process is not defined(anonymous function) @ vue.common.js:981 vue.common.js:9157 Uncaught TypeError: this._init is not a function

What am I doing wrong?

You import the vue.common.js (CommonJS bundle distributed on NPM). Change it to vue.js and see if it works. Also, put your own <script> to the bottom of your imports, because it depends on the vue.js import. — Riscie
– Riscie, Commented Jan 30, 2016 at 13:25

Riscie · Accepted Answer · 2016-01-30 13:36:38Z

Try this:

Changes to your version:

vue.js imported instead of vue.common.js
moved your own <script>...</script to the bottom of the imports because it depends on the vue.js import

activate the vue debug mode while developping makes it easier to find errors.

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
    <link href="/css/roboto.min.css" rel="stylesheet">
    <link href="/css/material.min.css" rel="stylesheet">
    <link href="/css/ripples.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <div class="container col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2> Locaties </h2>
            </div>
            <data list="{{ json_encode($locations) }}"></data>
        </div>      
    </div>

    <template id="ln-data">
        <ul>
            <li v-for="item in list">@{{ item.name }}</li>
        </ul>
    </template>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="/js/ripples.min.js"></script>
    <script src="/js/material.min.js"></script>
    <script>
        // vuejs debug mode
        Vue.config.debug = true; //TODO: Remove in production


        new Vue({
          el: 'body'
      })  

        Vue.component('data', {
            template: '#ln-data',
            props:['list']
        })
    </script>
    <style>
        .newclient {
            display:none;
        }
    </style>
</body>
</html>

Collectives™ on Stack Overflow

Vue.js error in laravel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related