[Vuejs]-Laravel 5 and Vue JS blank page

by

0👍

The default build exported by the NPM package is the runtime-only build. It doesn’t bring the template compiler. So you would either need to import the full build version of vue in your javascript or create a webpack alias (if you are using webpack).

This issue won’t occur when you define templates with the render function or Single File Component.

NOTE:

You don’t need babel-loader if you dont expect to support older browsers and if you dont use latest ES features and you won’t need vue-loader if you are not using Single File Components.

Also note that you must include the meta tag in your HTML <meta charset="utf-8">

This would work – 

// webpack
module.exports = {
  mode: "production",
  entry: ["./app.js"],
  output: { filename: "./app.min.js" },
  resolve: { alias: { vue: "vue/dist/vue.js" } },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  }
};

// app.js

import Vue from "vue";
// import Vue from 'vue/dist/vue.js';

window.app = new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Build something awesome" }
    ],
    message: "Welcome"
  },
  delimiters: ["%%", "%%"]
});


<!-- index.html -->

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="app">
    <p>%% message %%</p>
    <li v-for="todo in todos">
        %% todo.text %%
    </li>
    <input v-model="message">
</div>
<script src="app.min.js"></script>
</body>
</html>

-1👍

Have you wrapped the contents by vApp?
Like this:

<div id="vApp">
    <li v-for="todo in todos">
        %% todo.text %%
    </li>
</div>

Leave a comment