Loading Vue into 5.5

Published 2 months ago by Lordgreymaul

Hey Guys

So I always used to bring Vue in via a CDN or some otherway and now I understand VUE is in webpack with 5.5.

So I have npm run watch and compiled

my Vue code is

const app = new Vue({
    el: '#app',
    data: {
        message:'This is a note!'
    }
});

and I have added it to my front end along with my public/js/app.js compiled file

 <div id="app">
                    <p>{{ message }}</p>
                    <input type="text" v-model="message">
                </div>

<script href="{{URL::asset('js/app.js')}}"></script>

And get nothing and just the string output of message!? and Vue Dev tools isnt picking up a instance

I no im missing a step here just cant seem to find it

ejdelmonico

Assuming you have installed your package.json packages (Vue), you should leave the main Vue instance clean by restoring it back to just defining the instance. If you want to play around with everything, just use the Example.Vue in /assets/js/components or make a new one. If you decide to make a new vue component, store it in that directory and register it in app.js below Example.vue. Then, in welcome.blade.php, just add

<div id="app">
    <Example></Example>
</div>

Now, adjust the template to whatever you want. You can add your data in the script section. Hope that helps.

Lordgreymaul

So I have tried that

<div id="app">
                    <Example></Example>
                </div>

I have added the script still at the bottom

Node modules contains Vue as does my package.json and still nothing

Vue Dev tools isnt picking it up either

Update ***

I thought it maybe a Chrome caching issue so have tried it on Firefox and still no joy

ejdelmonico

@Lordgreymaul Did you run yarn or install and build with yarn/npm run dev?

ActiveMonkey

use <p>@{{ message }}</p>

Lordgreymaul

I actually ran php artisan make:auth and it all fired into place! No idea what I did wrong or why in never worked but its working fine now

Please sign in or create an account to participate in this conversation.