Why the header and footer loaded first and the middle content load after a delay. Here is my code.
<template>
<div>
<Header />
<nuxt />
<upper-footer />
<Footer />
</div>
</template>
In index.vue I removed <no-ssr></no-ssr> and it is fixed.
Before:
<template>
<no-ssr>
My Content
</no-ssr>
</template>
After:
<template>
My Content
</template>
Related
I have problem with implementing transitions route when page is changed. Am using VUE 3 and have implemented Single Page App.
When am on Home page that not work.
When i change page to AboutUs and refresh transitions work.
When i go to Contact page from About us work.
When i back from contact to Home not work.
When am on home and do refresh not work.
So on all work except on '/' homepage.
I implement it in Root Component
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
style.css
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
Here is full code:
<script>
import HeaderTop from './pages/partials/header_top.vue'
import HeaderMiddle from './pages/partials/header_middle.vue'
import MainNavbar from './pages/partials/main_navbar.vue'
import MainFooter from './pages/partials/footer.vue'
export default {
components: {
HeaderTop,
HeaderMiddle,
MainNavbar,
MainFooter
}
}
</script>
<template>
<!-- Header start -->
<header class="header_wrap">
<div class="header-top">
<HeaderTop></HeaderTop>
</div>
<div class="header-middle">
<HeaderMiddle></HeaderMiddle>
</div>
<div class="header-bottom">
<MainNavbar></MainNavbar>
</div>
</header>
<!-- Header end -->
<!-- Content start -->
<main role="main">
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</main>
<!-- Content end -->
<!-- Footer start -->
<footer id="main-footer">
<MainFooter></MainFooter>
</footer>
<!-- Footer end -->
</template>
<ButtonAtom></ButtonAtom>
this is the button components that I made.
<template>
<div>
<button class="px-2 py-1" :class="[borderRadius, backgroundColor]">
<slot />
</button>
<div>
</template>
and this is the html tag inside the components.
If I add css to the <ButtonAtom> like <ButtonAtom color="white">
color connects to the root tag which is <div>
the point is if I try to connect the css to <button>.
Is there any ways to connect to <button> without deleting the root html <div>
P.S this is vue3.
You should pass a style attribute with color:white as property <ButtonAtom style="color:white"> then inside the child component add inheritAttrs:false and bind that $attrs to the button element:
<template>
<div>
<button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]">
<slot />
</button>
<div>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
Just a shorter example but have you already tried this:
<button style="color: white"></button>
you can pass in the color as a prop to the button component and use it on the button itself
<template>
<div>
<button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]">
<slot />
</button>
<div>
</template>
<script>
export default {
props: {
color: String,
}
}
</script>
and use it in the parent component like
<ButtonAtom color="white">
I have this structure:
components
Login.vue
layouts
default.vue
middleware
authenticated.js
Pages
index.vue
Is there somethin form that Redirect to the Login component from middleware/authenticated.js?
I have this code in default.vue, from where I do the Login.vue import.
<template>
<v-app dark>
<div v-if="$auth.loggedIn" >...
<!-- Contenido del Main -->
<v-main>
<v-container>
<nuxt />
</v-container>
</v-main>
</div>
<div v-else>
<!-- Page Login Component-->
<Login />
</div>
</v-app>
</template>
<script>
import Login from "~/components/Login"
export default {
components: {
Login,
},
}
</script>
I don't have this idea, because in the page They use it like this
if (!store.state.authenticated) {
return redirect('/login')
}
could someone explain to me?
We are building a survey mechanism where we can have the user create their own set of questions, the type, etc. The users can show up a single element at a time. Or a group of questions. I use the neon-animated-pages to go from one singular question to another.
-- index.html --
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<test-survey surveyid="99999999-9999-9999-9999-999999999999" submissionid='00000000-0000-0000-0000-000000000000'}' ></test-survey>
</section>
<section data-route="users">
<paper-material elevation="1">
</paper-material>
</section>
<section data-route="user-info">
<paper-material elevation="1">
</paper-material>
</section>
<section data-route="contact">
<paper-material elevation="1">
</paper-material>
</section>
</iron-pages>
--test-survey.html--
<div class="vertical layout">
<div class="flex">
<neon-animated-pages id="views" class="flex" selected="0" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<test-template items="{{survey.Questions}}" id="surveyquestions">
</test-template>
</neon-animated-pages>
<paper-toast
id="toast"
text="Saved successfully.">
</paper-toast>
</div>
</div>
Since needing to be able to group questions together, we moved the following code to another file, stand alone so it can be called from a place where single questions are asked. Or from a place where it will take a list of questions as a group and show them within one section.
--test-template.html--
<template>
<template is="dom-repeat" id="surveyquestions" items="{{items}}" sort="_sort">
<template is="dom-if" if="{{isFormat(item.Type, 'Single-Select')}}" >
<question-singleselect question="{{item}}"></question-singleselect>
</template>
<template is="dom-if" if="{{isFormat(item.Type,'Open-Ended')}}">
<question-openended question="{{item}}"></question-openended>
</template>
<template is="dom-if" if="[[isFormat(item.Type,'Multi-Select')]]">
<question-multiselect question="{{item}}"></question-multiselect>
</template>
<template is="dom-if" if="[[isFormat(item.Type,'Section')]]">
<question-section question="{{item}}"></question-section>
</template>
<template is="dom-if" if="{{isFormat(item.Type,'Numerical')}}">
<question-numerical question="{{item}}"></question-numerical>
</template>
</template>
</template>
--test-chrome.html--
<template>
<paper-card heading="{{question.Title}}" id="paper-card-{{question.Id}}">
<div class="card-content {{question.Type}}">
<div class="questionanswers">
<content select=".questionanswers"></content>
</div>
</div>
<div class="card-actions">
<paper-button class="raised primary" on-tap="prevAction" id="prevButton_{{question.Id}}" hidden$="{{_hidePrev(question.Type)}}">Previous</paper-button>
<paper-button class="raised primary" on-tap="nextAction" id="nextButton_{{question.Id}}" hidden$="{{_hideNext(question.Type)}}">Next</paper-button>
<paper-button class="raised primary" on-tap="saveAction" id="saveButton_{{question.Id}}" hidden$="{{_hideSave(question.Type)}}">Submit</paper-button>
</div>
</paper-card>
</template>
Once I put the list of question-types into a separate form, it stopped working. It listed all the questions on one page, instead of navigating from one question to the next. It works if the section of test-template.html is back in the test-survey.html
I'm familiar with the concept of ngTransclude via AngularJS and this.props.children via ReactJs, however does Aurelia support transclusion, that is, the notion of inserting, or transcluding, arbitrary content into another component?
Transclusion in AngularJS (https://plnkr.co/edit/i3STs2MjPrLhIDL5eANg)
HTML
<some-component>
Hello world
</some-component>
JS
app.directive('someComponent', function() {
return {
restrict: 'E',
transclude: true,
template: `<div style="border: 1px solid red">
<div ng-transclude>
</div>`
}
})
RESULT
Transclusion in ReactJs (https://plnkr.co/edit/wDHkvVJR3FL09xvnCeHE)
JS
const Main = (props) => (
<SomeComonent>
hello world
</SomeComonent>
);
const SomeComonent = ({children}) => (
<div style={{border: '1px solid red'}}>
{children}
</div>
);
RESULT
Several ways to do transclusion: Official docs
1. content slot <slot></slot>
The <slot> element serves as a placeholder in a component's template for arbitrary content. Example:
some-component.html
<template>
<div style="border: 1px solid red">
<slot></slot>
</div>
</template>
usage:
<template>
<require from="some-component"></require>
<some-component>
hello world
</some-component>
</template>
result:
2. named slots
A component can contain several replaceable parts. The user of the component can replace some or all of the parts. Parts that aren't replaced will display their default content.
blog-post.html
<template>
<h1>
<slot name="header">
Default Title
</slot>
</h1>
<article>
<slot name="content">
Default content
</slot>
</article>
<div class="footer">
<slot name="footer">
Default footer
</slot>
</div>
</template>
usage:
<template>
<require from="blog-post"></require>
<blog-post>
<template slot="header">
My custom header
</template>
<template slot="content">
My custom content lorem ipsum fla fla fla
</template>
<template slot="footer">
Copyright Megacorp
</template>
</blog-post>
</template>
3. template parts
The slots spec has limitations: http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-content-projection/5
Use template-parts for dynamically generated slots: https://github.com/aurelia/templating/issues/432
Yes, Aurelia supports the concept of transclusion through use of the <content /> component. Per the below, any content nested within <some-component> be it HTML, a String, or another component, will be rendered within this component.
app.js
export class App {}
app.html
<template>
<require from="some-component"></require>
<some-component>
hello world
</some-component>
</template>
some-component.js
export class SomeComponent {}
some-component.html
<template>
<div style="border: 1px solid red">
<content />
</div>
</template>
RESULT
UPDATE: USE SLOT INSTEAD OF CONTENT
// Actual component
<your-component>
Just some content
</your-component>
// Template of the component
<template>
<div class="some-styling">
<slot></slot> // <-- "Just some content" will be here!!
</div>
</template>