Laravel Vue component not working - javascript

I am using Laravel 5.4 and trying to implement vue.js. I have created a component like this :
<template>
<li>This is a list item</li>
</template>
<script>
export default {
ready() {
console.log('Component ready.')
}
}
</script>
and saved it as Chat.vue in components folder.
Then in app.js:
Vue.component('chat', require('./components/Chat.vue'));
const app = new Vue({
el: '#app'
});
Trying to use it in view:
<div id="app">
<chat></chat>
</div>
But I don't get the expected view.I should get a <li> but nothing.BLANK!!!
Don't get any message in console.I have searched through internet for last three hours to get a solution.I have cleared my cache and disabled cache in chrome. Nothing happened.I also tried in firefox but no luck.
Another problem is I have deleted Example.vue from the components folder.But when I am using <example> in my view, it's still working.

Related

Vue js for non SPA apps - loading components in with out the app component

I am very new to Vue.js and I am trying to figure out a few things about it. One of the things I would like to use it for is to implement components without creating an SPA. So in other words I can make a reference to components in a static page with out having to have it run through App component.
When I have done this with react js I have used react habitat. I am wondering if there is something similar for Vue.js that is available or is it something you can do with out a third party module-tool.
You don't need any App component. Just assign any wrapper (div) to a Vue module (Vue instance). I use a component for retrieving contacts, for example.
You can have multiple Vue applications in one page. They just cannot overlap.
html:
<div class="col-md-4 col-sm-4" id="safeContactsFooter">
..some html stuff
<ul class="phone">
<li>Phone: <safe-contact type="phone" ></safe-contact></li>
</ul>
</div>
Vue module:
export default new Vue({
el: '#safeContactsFooter',
components : {
'safe-contact' : () => import('./components/Safe contact') ,
},
});
Then, you have to register the module only when the div with the proper ID is present. Otherwise, the console will yell at you that the object doesn't exist. I do it this way:
if(document.getElementById("safeContactsFooter")){
import('../Safe contacts/Safe contacts footer.Module.js');
}
You can do that by importing your components into a JavaScript file and creating a vue instance with a referenced element:
// JS File
import Vue from 'vue';
import YourComponent from './YourComponent.vue';
export default new Vue({
el: '#app',
components: {
YourComponent
}
});
// HTML file
<div id="app">
<your-component></your-component>
</div>

How to make Laravel/Vue implementation show individual entry

I'm trying to integrate Laravel with Vue, and further down the line Nuxt, in the hope that I can integrate snazzy page transitions like the ones shown on http://page-transitions.com into my websites.
I've been reading a tutorial about using Vue with Laravel; https://scotch.io/tutorials/build-a-guestbook-with-laravel-and-vuejs, and I was pleased to find that Laravel ships with a Vue implementation, so I thought there'd be quite a lot of info on how to use the two in combination, but there doesn't seem to be.
I completed the tutorial and made the guestbook as it was described. I'm now trying to build upon that.
Specifically, Im trying to create individual pages for each of the guestbook entries.
I do have quite a bit of experience using Laravel, but only what I've described above with Vue.
So, in order to create the individual pages, I've created a new route in the routes/web.php file;
Route::get('signature/{id}','SignaturesController#show')->name('signature');
I've then created a new code block in app/Http/Controllers/SignaturesController.php to deal with this request;
public function show()
{
return view('signatures.signature');
}
I've created the specified view in resources/views/signatures/signature.php;
#extends('master')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<signature></signature>
</div>
</div>
</div>
#endsection`
And I've created the vue file that should integrate with this view in resources/assets/js/components/Signature.vue;
<template>
<h1>Signature</h1>
</template>
<script>
export default {
}
</script>
Finally, I've registered the component in resources/assets/js/app.js and reran npm run dev.
This has worked to an extenet, I can view the file at the expected url; http://transitions.localhost/signature/1.
My question is, how do I get the data related to the signature with the ID of 1 into the page? I can't even echo out {{ id }} or {{ signature }}.
Any other resources that you've found helpful regarding this subject would also be greatly appreciated. Thanks for taking the time to read through all of that, does anyone know where I go from here?
You will need to pass the data to your vue component
Maybe something like this?
In your view:
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<signature :signature="{{ $signature }}"></signature>
</div>
</div>
</div>
#endsection
In your vue component:
<template>
<h1>This signature has the ID of: {{ signature.id }}</h1>
</template>
<script>
export default {
props: ['signature']
}
</script>

Using a product tour library with VueJS

I'm trying to setup a feature intro tutorial for my web app (like intro.js). I'm having trouble with intro.js with nothing happening (no error message or tour messages). I tried setting up the data attributes that intro.js uses and calling the tour start from the mounted function on App.vue, but no luck. I'm looking to see if anyone has experience with with libraries like this combined with VueJS.
Code from App.vue:
mounted: function() {
const introJS = require('intro.js')
introJS.introJs().start()
}
Inside of the same component in it's <template>:
<div class="card card-accent-info" v-if="!isLoading" data-intro="Test step here" data-step="1">
I also have the css loaded in App.vue:
#import "~intro.js/minified/introjs.min.css";
The problem might be the way you're importing the CSS from the <style> tag. To get the styles to apply properly, import the CSS in JavaScript:
<!-- MyComponent.vue -->
<script>
import "intro.js/minified/introjs.min.css";
export default {
mounted() {
const introJS = require("intro.js");
introJS.introJs().start();
}
};
</script>
demo

Inject or Initialize Vue components in generated HTML

I use a an WYSIWYG article editor that generates some HTML for articles that I save in the database and later show to the user.
The problem is I need to insert Vue components into this auto generated HTML for showing dynamic products. I can make a custom block in the editor that adds in HTML but I want it to work as a Vue component that updates the product description directly from the database.
What Im thinking now is to add a button that adds a div with a data property of the products ID. I can then replace that div in the code with a Vue component with the same ID by injecting a component.
Another idea I had was to simply add in components like <product id="1031"/> as plain html and then try to compile the whole article HTML with Vue but I read that the v-html directive only compile code as plain HTML.
Is this possible? Or is there any better ideas?
If you are using the full build of Vue (not the runtime only build) you can initialize a new instance of Vue and mount it wherever you like, pass in data etc.
// Main app
new Vue({
el: '#app',
data: {
stuff: 'inserted message'
},
methods: {
clicked() {
// Add new
new Vue({
template: `<h1 style="color: red;">{{ message }}</h1>`,
parent: this,
data: {
message: 'new message'
}
}).$mount(document.getElementById('more'))
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
There are some things here before like {{ stuff }}
but when you press <button #click="clicked()">add more</button>
you can add more things here:
<div id="more"></div>
</div>

Jquery and Vue, .html() is not working

I have been playing with the Vue tutorial Here and I have added a simple Jquery .html function. However it is not working. I have added the jQuery plugin, and there are no errors in the console. I have my "App" component defined like this:
<template>
<div id="app">
<div id="mainMenu"> Hello </div>
</div>
</template>
<script>
import * as start from './assets/scripts/start.js'
export default {
name: 'app',
created: start.loadMainNavigation()
}
</script>
and my loadMainNavigation function like this:
function loadMainNavigation() {
$('#mainMenu').html("ASERFDASRF");
console.log("In load Nav");
}
I can see the "In load Nav" in the console. No errors, but the DIV still has the original "Hello" - What am I doing wrong?
The reason the content doesn't change is that, at the time you are executing your function, the component has not yet been rendered to the DOM. The DOM is not rendered until the mounted event.
Beyond that, however, you need to be careful when you are integrating jQuery and Vue, or avoid it altogether. The idiomatic Vue way to do this would be something like this.
console.clear()
new Vue({
el: "#app",
data:{
message: "Hello"
},
created(){
this.message = "ASERFDASRF"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
<div id="mainMenu"> {{message}} </div>
</div>
There are a few times when you might mix jQuery and Vue (when you want to use a jQuery plugin for which there is no Vue counterpart, for example) but typically, there is almost always a way to do what you want without jQuery.

Categories