I tried to embed facebook post just like in the official doc. However, the post is not showing at all.
index.html
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0" nonce="UOlW2bys"></script>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
Home.vue
<div class="wrapper h-400px w-400px">
<div
class="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
data-width="500"
data-show-text="true"
>
<blockquote
cite="https://www.facebook.com/20531316728/posts/10154009990506729/"
class="fb-xfbml-parse-ignore"
>
Posted by
Facebook
on <a
href="https://www.facebook.com/20531316728/posts/10154009990506729/"
>Thursday, 27 August 2015</a
>
</blockquote>
</div>
</div>
Other than that, I tried using the iframe and it is working however I would like to use SDK method.
I also tried with normal plain .html file and it is indeed working just fine. So maybe there are some adjustments that I need to make to Vuejs.
Super Thanks in advance.
Related
I am trying to learn Vue.js and understand SFCs and importing components into other components. The main App.vue is mounted/loaded into the <div id="app"></div> within an index.html file.
However I have come across a tutorial that does this in the src/index.html file which I don't understand:
<html>
<head>
...
</head>
<body>
<div id="app">
<app></app> <!-- how is it possible to include a Vue.js component here?
</div>
<script src="/dist/bundle.js"></script>
</body>
</html>
I don't understand how a regular HTML file can contain reference to a Vue.js component like above. I can't see it being done like this anywhere in the docs.
So I've installed the latest Vue CLI and have a project set up. I am familiar with the concepts of Vue but I need help with structure. Can somebody guide me as to how I could create a navigation bar that would be used across all pages and would contain vue-router links for pages? My first thought was to make a component Navbar.vue and somehow get that into the App.vue so that it is rendered before any <router-view></router-view>. Is this the proper way to do it? Would I instead try to put it inside index.html? I am confused as to how to do this. I am using bootstrap for css.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>foo.ca</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue:
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
You should add into App.vue. Index.html will only render the app.
Remember that router-view will only render the component you set(in the router configs) for the route inside the <router-view></router-view> call. App is just like a layout for your app.
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<!-- Assuming your navbar is looking like bootstrap -->
<navbar></navbar>
<!-- You can move container inside every page instead, if you wish so -->
<div class="container-fluid">
<div class="row">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
Just paid for a commercial licence and trying to follow the docs but can't get the animation to work
I am using Laravel 5.4 and Vue 2
<head>
<link rel="stylesheet" href="/css/animate.min.css" />
</head>
<body>
<div id="app">
#yield('content')
</div>
<script src="/js/app.js"></script> // vue file
<script src="/js/wow.js"></script>
<script>
var wow = new WOW();
wow.init();
console.log(wow); // works fine
</script>
</body>
// content
#extends('layouts.app')
#section('content')
<div class="wow slideInLeft"> // not working
<p>Test</p> // not working when applied here either
</div>
#stop
Where am I going wrong?
update, wow is being applied to my Vue components but not native html tags.
it seems that style="visibility: hidden;" is not being overwritten.
// Vue component with working wow animation
// this component is on the same page where I want to apply wow to native html
<template name="test">
<p class="wow bounceIn>Test</p> // works
</template>
wow.js happens on page load and not on scroll
I was applying height and width constraints with CSS
Removing these made it work
Im trying to run this plugin
https://github.com/jzaefferer/jquery-treeview
In clear html it works, so it means the problem is in my mvc code.
I have following code
<!-- TREEVIEW Plugin -->
<link href="/Content/jquery-treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />
<script src="/Content/jquery-treeview/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/Content/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#treeview ul").treeview();
});
</script>
the link addresses are okay, because they are not underlined and i checked the path manually. In clear HTML the plugin works. I also tried
#Scripts.Render("~/Content/jquery-treeview/jquery-1.2.6.min.js")
or
#Url.Content("~/Content/jquery-treeview/jquery-1.2.6.min.js")
At it seems same (not working). Where is the problem ?
But this code works, so JQuery is loaded.
$(document).ready(function () {
alert("ready!");
});
HTML Code
<div id="treeview">
<ul>
<li>Category
<ul><li>SubCategory</li></ul>
</li>
</ul>
</div>
Mystery revealed, in Shared/_Layout.cshtml JQuery was also included by default so the solution was comment it out :-)
I'm currently trying to implement a dojo expandopane in my spring mvc project and it seems to not be working.
<script type="text/javascript">
dojo.require('dijit.TitlePane');
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojox.layout.ExpandoPane");
</script>
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer">
<div dojoType="dojox.layout.ExpandoPane" maxWidth="225" splitter="true" region="leading" style="width: 225px;">
Hi. I'm the Expando Pane
</div>
<div id="_title_${sec_id}_id" dojoType="dijit.layout.ContentPane" splitter="true" region="center">
<script type="text/javascript">Spring.addDecoration(new Spring.ElementDecoration({elementId : '_title_${sec_id}_id', widgetType : 'dijit.TitlePane', widgetAttrs : {title: '${sec_title}', open: ${sec_openPane}}})); </script>
<jsp:doBody />
</div>
</div>
This is what i have so far... with this code on the deploy of the project the two div's will not be displayed. Can anyone indicate why is this happening?
I'm not sure if i'm doing anything wrong in the process of getting this expandopane to work.
How do you connect dojo framework on page? Do you enable dojo parser?
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
have you forgotten to include parser ?
dojo.require("dojo.parser");
I have noticed dojox.layout.ExpandoPane doesn't work fine in dojo 1.6. it's weird but I have tried run it several times. The same code with dojo 1.5 work OK.