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
Related
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.
Non WebDev here trying to build a basic UI with primevue on vue3. Tried to run the basic demo but with some components included. Don't know if components come with their own CSS dependencies.
Bellow is my html code. I have also tried using a vue project with separate components and gottenthe same result
Basic example fails:
<html>
<head>
<meta charset="utf-8">
<title>PrimeVue Demo</title>
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
</head>
<body>
<div id="app">
<p-inputtext v-model="val"></p-inputtext>
<h6>{{val}}</h6>
</div>
<div class="p-d-flex">
<div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div>
<div>Item 3</div>
</div>
<div class="p-grid">
<div class="p-col-4">4</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
</div>
<div class="p-grid">
<div class="p-col-2">2</div>
<div class="p-col-6">6</div>
<div class="p-col-4">4</div>
</div>
<script>
const {createApp, ref} = Vue;
const App = {
setup() {
const val = ref(null);
return {
val
};
},
components: {
'p-inputtext': primevue.inputtext
}
};
createApp(App).mount("#app");
</script>
</body>
</html>
Should render 1 row for flex items and 2 rows for numbers in grid layout. instead it renders all rows with no styling. What am I missing?:
In order to use prime vue's flex and grid layout, you need to load PrimeFlex.
https://primefaces.org/primevue/showcase/#/primeflex
The documentation only has npm setup but you may be able to include the following link.
<link href="https://cdn.jsdelivr.net/npm/primeflex#2.0.0/primeflex.min.css" rel="stylesheet">
In case you do it through npm, After installing the package, don't forget to include the CSS file, in my case, I included it in my main.js just adding this line.
import 'primeflex/primeflex.css';
https://primefaces.org/primevue/showcase/#/primeflex
The CDN method works!! However I downloaded the file and placed this
<link rel="stylesheet" href="static/primevue/primeflex.min.css" />
inside the head section of my html file.
However it did not work as per the documentation. I had to remove the p- for it to work:
<div id="app" class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
i am very new to VueJS and want to build an Admin Dashboard for an existing bootstrap template (SB Admin Pro). I know there is a BootstrapVUE but we want to use the specified template that we purchased before. So this is not an option for me/us.
My Goal:
In our vue component we make an axios call to our backend to retrieve and show some data. If the call fails we want to call in the catch block a bootstrap function for toast to show some notification to the user (like: Error while fetching data from backend...). We included the bootstrap and jquery libraries from the template in the default index.html.
The Problem:
I don't know how to call the toasts (or other) functions from the vue component. In the template the call looks like this:
$("#toastBasic").toast("show");
Our index.html looks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="svote UG (haftungsbeschränkt)" />
<script data-search-pseudo-elements defer src="js/font-awesome-5.11.2.min.js" crossorigin="anonymous"></script>
<script src="./js/feather.min.js" crossorigin="anonymous"></script>
</head>
<body class="nav-fixed">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
<!-- built files will be auto injected -->
<script defer src="js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script defer src="js/bootstrap.min.js" crossorigin="anonymous"></script>
<script defer src="js/script.js"></script>
</body>
</html>
Our vue component:
<template>
<main>
<div style="position: absolute; top: 1rem; right: 1rem;">
<!-- Toast container -->
<div style="position: absolute; bottom: 1rem; right: 1rem;">
<!-- Toast -->
<div class="toast" id="toastBasic" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<i data-feather="bell"></i>
<strong class="mr-auto">Toast with Autohide</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 close" type="button" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">This is an example toast alert, it will dismiss automatically, or you can dismiss it manually.</div>
</div>
</div>
</div>
<ContentHeader title="Blank" icon="fas fa-file" subtitle="A blank page to get you started!" />
<div class="container-fluid mt-n10">
<div v-if="error" class="alert alert-danger" role="alert">
{{ error }}
</div>
<div class="row">
<Card cHeader="Eine Karte" class="col-md-12"> {{ contacts }}</Card>
</div>
</div>
</main>
</template>
<script>
import ContentHeader from '../../components/ContentHeader'
import Card from '../../components/Card'
import axios from 'axios';
export default {
name: "Contact",
components: {
ContentHeader,
Card,
},
data() {
return {
contacts: null,
error: null
}
},
mounted() {
const url = 'http://localhost:3000/v1/';
axios.get(url + 'contsact')
.then(response => {
this.contacts = response.data
console.log(response)}
)
.catch(error => {
console.log(error.response)
$("#toastBasic").toast("show");
});
}
}
</script>
In vue.config.js, specify jquery as external (this tells webpack where to provide jquery from when it's imported in any component):
configureWebpack: {
externals: {
jquery: 'window.jQuery'
}
}
Place all the <script>s you want loaded by the time Vue inits in your public/index.html page, in the <head> tag and remove their defer attribute. This includes any jquery plugin (or anything requiring/extending jquery) you might want to use in your Vue app (in your case, bootstrap.min.js).
The above will make it work when developing (in serve). You'll need to do the same for prod: Load jquery and any dependency before initing the Vue app.
Now you can safely use
import * as $ from 'jquery'
in any component.
Webpack will place in $ whatever window.jQuery is at the moment the component inits.
The above approach makes sure all required scripts are loaded before Vue inits (which is a bit extreme, but it makes sure there's no way you can call the jquery method before its dependencies are loaded).
If you don't want to wait for jquery and bootstrap.min.js to load before you init your Vue app, a trick you could use is to assign jquery from window object just before you need it:
yourAlertMethod() {
const $ = window.jQuery;
$.toast()...
}
Obviously, you no longer have to move all the scripts in <head> and to remove their defer. This second method doesn't guarantee they would have already loaded before your method is first used. But your app inits faster.
Here's a basic example.
I used the second method, codesandbox.io doesn't have support for #vue/cli v3 hence vue.config.js doesn't work as in a Vue project created with vue create. Therefore, I had to use the second method.
The full list of dependecies you need to load before you call the $(el).toast() method:
bootstrap.min.css
jquery.js
popper.js
bootstrap.min.js
(see them in public/index.html). You can copy/paste them from Bootstrap.
You can get ref of the element and pass it to jQuery
<div ref="toast" class="toast" id="toastBasic" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
import $ from 'jQuery';
$(this.$refs.toast).toast("show");
I don't recommend that though.
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>
I am using browserify and i want to use bxslider. When i had all the templates in a single file (index.html), it was working. Now i am using browserify to build it so i have vue components. I want to use bx slider in a vue component.
slider.vue
<ul class="bxslider">
<li>
<img src="img/thumb-01.jpg"/>
</li>
</ul>
index.html
<link href="plugins/bxslider/jquery.bxslider.css" rel="stylesheet" />
<div id="app"></div>
<!-- scripts -->
<script src="plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script src="plugins/bxslider/jquery.bxslider.min.js"></script>
<script src="dist/build.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
I couldn't get the bxslider, i try to use it as a function in a component, alse try to use it in a seperate file. Any suggestions please?
The problem is that $(document).ready() is executed before the vue.js code. You need to replace this code
$(document).ready(function(){
$('.bxslider').bxSlider();
});
with
$(document).ready(function(){
setTimeout(function(){
$('.bxslider').bxSlider();
},100);
});