current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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?

share|improve this question
    
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 Jan 30 '16 at 13:25
up vote 2 down vote accepted

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.