I have this nuxt page :
<template>
<div>
<Transition name="test-transition" appear #before-enter="beforeEnter" #enter="enter">
<h1 class="text-4xl pb-3 text-center" >About</h1>
</Transition>
</div>
</template>
<script setup>
import gsap from 'gsap'
const beforeEnter = (el) => {
el.style.transform = 'translateY(-60px)'
el.style.opacity = 0
}
const enter = el => {
gsap.to(el, {
duration:1,
y:0,
opacity: 1,
ease:'bounce.out'
})
}
</script>
<style>
</style>
Whenever the page is loaded in the browser, the h1 element should bounce in , as it did when I tested the same code in vuejs. But when I`m using nuxt 3, it simply doesnt animate.
Related
please I try to make my first vuejs - laravel application,
and I get a trouble with layouts and assets, this is my code:
Here i try to detect the layout from route, it dosen't work very well, because when i refresh the page, it chage the main layout first and after go the layout needed
app.vue
<template>
<div>
<div v-if="$route.meta.layout == 'front'">
<frontLayout></frontLayout>
</div>
<div v-else-if="$route.meta.layout == 'admin'">
<adminLayout></adminLayout>
</div>
<div v-else>
<mainLayout></mainLayout>
</div>
</div>
</template>
<script>
let frontLayout = require('./layouts/frontLayout.vue');
let mainLayout = require('./layouts/mainLayout.vue');
import {mapState} from 'vuex'
export default {
components:{frontLayout,mainLayout},
computed: {
...mapState({
userStore: state => state.userStore
})
},
created(){
console.log('app vue')
}
}
</script>
For the asset after setting the webpack laravel-mix like this:
webpack.mix.js
mix.combine(['resources/assets/front/css/*','resources/assets/front/plugin-css/*','resources/assets/front/style.css'], 'public/css/front.css')
.options({
processCssUrls: false,
});
mix.combine(['resources/assets/front/script/*','resources/assets/front/plugin-script/*'], 'public/js/front.js')
.options({
processCssUrls: false,
});
I try to import the front.css file in the frontLayout.vue when it was loaded like this:
frontLayout.vue
<template></template>
<script>
export default {
}
</script>
<style scoped>
#import '../../../../public/css/front.css';
</style>
But it dosen't work always ! any help please. Thanks
I'm new in Polymer and I trying to do mobile app use Polymer and Cordova.
I use neon-animated-pages for pretty animation, and now I have some issue with iron-ajax. When I open project in browser on localhost:8080 all my pages already loaded and if I change page I want to make iron-ajax request. How can i do this?
example index.html
<dom-module id="my-app">
<template>
<style>
// some style
</style>
<app-header-layout fullbleed>
<app-header>
<app-toolbar>
<div main-title>Title</div>
<paper-input label="page" value="{{page::change}}"></paper-input>
<paper-icon-button icon="menu"></paper-icon-button>
</app-header>
<div class="content">
<neon-animated-pages id="page"
selected="{{page}}"
attrForSelected="index"
entry-animation="slide-from-right-animation"
exit-animation="slide-left-animation">
<neon-animatable index="0"><login-app name="login"></login-app></neon-animatable>
<neon-animatable index="1"><profile-page name="profile"></profile-page></neon-animatable>
<neon-animatable index="2"><secondary-page name="secondary"></secondary-page></neon-animatable>
</neon-animated-pages>
</div>
<footer>
© Polymer project
</footer>
</app-header-layout>
</template>
<script>
Polymer({
is: 'my-app',
behaviors: [GlobalsBehaviour],
properties: {
page: {
type: Number,
reflectToAttribute: true,
value: 0
}
}
});
</script>
And example some page with iron-ajax:
<dom-module id="secondary-page">
<template>
<style>
:host {
display: block;
}
</style>
<div>secondary PAGE</div>
<div>Var value - {{my}}</div>
<iron-ajax
id="login"
url="https://www.some.url/"
method="get"></iron-ajax>
</template>
<script>
Polymer({
is: 'secondary-page',
properties: {
my: {
type: String,
value: 'my'
}
}
});
</script>
I'm facing a problem, when i using Polymer's iron-ajax element.
I have a custom element like that:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="first-element">
<template>
<!-- Stylesheet-->
<style>
::host{
display:block;
}
</style>
<!-- Element content -->
<h1>
{{yolo}}
</h1>
<iron-ajax
auto
url="http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json"
handle-as="json"
on-response="handleResponse"
last-response="ajaxResponse"></iron-ajax>
<span>{{ajaxResponse.city_name}}</span>
</template>
<script>
Polymer({
is: "first-element",
properties: {
yolo: {
type: String,
value: 'YOLOOO'
}
},
handleResponse: function(){
console.log('Jobs Done')
}
});
</script>
</dom-module>
The handleResponse function, also display's browsers developer console, so that request is working correctly. Databinding also working correctly, i can also see my "yolo" properties value.
But, it doesn't display data, i also use brackets e.g [[ajaxResponse.city_name]]
How can I solve that? Thanks for help!
You are not binding iron-ajax last-response attribute to any of your polymer element properties, it's supposed to be : last-response = "{{ajaxResponse}}".
In addition the amazon request need to be loaded over https.
Here is Plunkr to see it in action.
You can check this PolyCast on iron-ajax if you want to learn more.
<dom-module id="first-element">
<template>
<!-- Stylesheet-->
<style>
::host {
display: block;
}
.icon{
width:35px;
height:auto;
float:right;
position:relative;
top:-20px;
}
</style>
<!-- Element content -->
<h1>
{{yolo}}
</h1>
<iron-ajax auto url="https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json" handle-as="json" on-response="handleResponse" last-response="{{ajaxResponse}}"></iron-ajax>
<h1>{{ajaxResponse.city_name}}</h1>
<template is="dom-repeat" items="{{ajaxResponse.days}}" index-as="day_no">
<div>
<hr>
<span>Day : {{day_no}}</span>
<br>
<img src="{{item.icon}}" alt="" class="icon">
<span> High: {{item.high}} C</span>
<br>
<span> Low: {{item.low}} C</span>
</div>
</template>
</template>
<script>
Polymer({
is: "first-element",
properties: {
yolo: {
type: String,
value: 'YOLOOO'
},
ajaxResponse: {
type: Array
}
},
handleResponse: function(e) {
console.log(e.detail.xhr.response);
}
});
</script>
</dom-module>
this is my element
<dom-module id="user-verify">
<style>
paper-dialog {
--paper-dialog-background-color: white;
width: 348px;
height: 205.594px;
}
</style>
<template>
<paper-dialog id="id_verify" modal>
<h2><content></content></h2>
<div id="maincontainer">
<div class="g-recaptcha"
data-sitekey="6Lc0pAkTAAAAAGcsiru1MX6kjI6HGV8mbImc0cwk"
data-callback="recaptchaCallback"></div>
</div>
<div class="buttons">
<paper-button dialog-confirm id="varify_button" disabled>Ok</paper-button>
</div>
</paper-dialog>
</template>
<script>
Polymer({
is: "user-verify",
attached: function(){
this.$.id_verify.open();
},
recaptchaCallback: function(){
this.$.varify_button.disabled = false;
}
});
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
However, it doesn't work when i put the javascript of recaptcha in side the head of the html, so i can only put it inside the element. But now ,the data-callback function doesn't work. How to solve this? Or my code have some bugs?
Your callback recaptchaCallback is a method of the polymer object and not public function available for the recaptcha API. The way you register the function (via String) the API assumes your callback is global.
I would simply switch to attaching all the recaptcha-logic programmatically:
...
attached: function() {
grecaptcha.render(this.$.maincontainer.querySelector('.g-recaptcha'), {
'sitekey' : 'your_site_key',
'callback' : this.recaptchaCallback,
});
this.$.id_verify.open();
}
...
I have just started trying out angular js and using the egghead.io videos. One of the samples is about routeProvider. I am using vs.net 2012 to run it but cant get it to display any of the templates or messages when I hit:
http://localhost/app.html/pizza
This is the sourcecode inside of app.html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum"
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app" ng-controller="AppCtrl">
</div>
Modified from JoeyP's post to make it work:
index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
templateUrl: "yum.html" // there was a typo here in the OP
})
.otherwise( {
redirectTo: '/'
});
});
app.controller("AppCtrl", function ($scope) {
$scope.message= "this is my app";
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
Go get some pizza! {{message}}
</div>
yum.html
<p>
MMMM, pizza
more pizzaaaaaaaa
</p>
Note: The code need to be run on web-server (ex. Apache) to function.
app.html and yum.html are fetched by angular after the page has loaded. So in your example http://localhost/pizza should point to the page with the above code and yum.html (as well as app.html) should be located in the root of your project.
On load angular will download app.html if you hit "/" and yum.html if you hit "/pizza". Here's an example
index.html (excluding <html>,<head>,<body>, etc)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum.html" // there was a typo here in the OP
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
<p ng-bind="model.app"><p>
<a ng-href="/pizza">Go get some pizza!</a>
</div>
yum.html
<p>
MMMM, pizza
</p>
The ng-controller attribute isn't needed because you defined the controllers in the routes. You do need the ng-view attribute somewhere in the main html file so angular knows where to insert the template.
John from egghead.io really needs to update this section of his tutorial.
See this answer:
Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider
you need to add this dependency:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module("app", ['ngRoute']);
P.S. template: "yum" is totally valid, as in template: "<p>yum</p>"
(JoeyP thinks you're trying to do templateUrl: "yum.html")