Vue component not rendering in basic php

Question

I am using basic php and trying to render vue component in html. But it always show blank page. I am not getting any js error.

Am I missing anything in below code?

My Directory Structure is like below.

Directory Structure. I am sorry, unable to show image due to less rep points.

app.js is in public folder. Below is the code

Vue.component("login", ("loginComponent.vue"));
var app = new Vue({
    el: "app",
    data: {

    },
    mounted: function() {
        console.log("Mounted");
    },
    methods: {

    }
});

Component Code present in loginComponent.vue file

<template>
    <div>
        <form role="form" class="row">
            <label for="Email Address" class="control-label">UserName</label>
            <input type="text" name="Email Address" class="form-control">

            <label for="Password" class="control-label">Password</label>
            <input type="password" name="Password" class="form-control">

            <button type="button" class="btn btn-primary" >
                Login
            </button>
        </form>
    </div>
</template>

loginView.php file code is like below.

<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>        
        <script src="./public/js/app.js"></script>
    </head>
    <body>
        <div id="app"> 
            <login></login>
        </div>
    </body>
</html>

I am sorry, Let me explain the directory structure. There are total 3 files. 1. loginComponent.vue 2. loginView.php and app.js — Abcdef
– Abcdef, Commented Aug 13, 2018 at 10:16
I read that. You are registering Vue.component("login", ("./components/Auth/login.vue")); in your first code, in your second you talk about loginComponent.vue?! — user8034901
– user8034901, Commented Aug 13, 2018 at 10:17
I am sorry, By mistake, I typed the wrong path. I have corrected the path now. — Abcdef
– Abcdef, Commented Aug 13, 2018 at 10:19
You shouldn't type code, but paste your exisiting one. Anyway, since your app.js is located in public/js and your component is located in root, have you tried Vue.component("login", ("../../loginComponent.vue"));? — user8034901
– user8034901, Commented Aug 13, 2018 at 10:22

Adriano · Accepted Answer · 2018-08-14 05:35:44Z

3

On your 3rd line in app.js, "app" is not a valid selector, try "#app" instead.

Edit: There are 3 things to fix.

You are not loading loginComponent.vue loginComponent.vue is not loaded on your browser. You need to add a script tag in loginView.php.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="loginComponent.vue"></script>
<script src="app.js"></script>

You can't use .vue syntax without webpack. Your loginComponent.vue are ran as a javascript, which means <template> tag is not available and you have to set template as a string.

var loginComponent = { 
template: `
  <div>
    <form role="form" class="row">
      <label for="Email Address" class="control-label">UserName Or EmailAddress</label>
      <input type="text" name="Email Address" class="form-control">

      <label for="Password" class="control-label">Password</label>
      <input type="password" name="Password" class="form-control">

      <button type="button" class="btn btn-primary" >
        Login
      </button>
    </form>
  </div>
`,

You have to wait DOMContentLoaded before mounting the app. In app.js,

Vue.component("login", loginComponent);
document.addEventListener('DOMContentLoaded', function () {
    var app = new Vue({
        el: "#app",
        data: {},
        mounted: function () {
            console.log("Mounted");
        },
        methods: {}
    });
})

edited Aug 14, 2018 at 5:35

Adriano

3,9845 gold badges36 silver badges58 bronze badges

answered Aug 13, 2018 at 10:28

Shu Yoshioka

4662 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abcdef Over a year ago

I am sorry, It is still not rendering the html from component.

Abcdef Over a year ago

Can u please try the above files in question your side? if that is working your side?

Shu Yoshioka Over a year ago

Are the any errors or warnings on your console? When I tried I got [Vue warn]: Invalid Component definition: loginComponent.vue

Abcdef Over a year ago

I got an error after applying the code above: Here is the screenshot: i.sstatic.net/VxT1R.png

Shu Yoshioka Over a year ago

Oh sorry I misunderstood your setup. You can't use single file component (.vue files) without building tool like webpack.

|

Collectives™ on Stack Overflow

Vue component not rendering in basic php

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related