I am working in the project developed with Vue 2 with VueRouter and I am trying to work with my modals controlled by my VueRouter!
I've done the following code
Main vue component: My normal components will be loaded on the default router-view and all my modals will be loaded on the modal router-view
<div id="app">
<router-view v-if="!isLoading"></router-view>
<router-view v-if="!isLoading" name="modal"></router-view>
</div>
RoutedModals Mixing
As you can see on my beforeRouteEnter method I am checking if there is a previous "from" route (which means the user got the page navigating inside the app)... If it's I set that one as default component... if not (which means the user got directly from the URL) I set my dashboard as default and it will be opened behind my modal.
import Dashboard from 'modules/dashboard/components/Main.vue'
import { isNil } from 'lodash'
export default {
data() {
return {
canAccessDirect: true,
goBackTo: '/'
}
},
beforeRouteEnter(to, from, next) {
to.matched[0].components.default = isNil(from.matched[0]) ? Dashboard : from.matched[0].components.default
next(vm => {
if (!vm.canAccessDirect)
vm.$router.push({
name: 'dashboard.index'
})
vm.fetchRecords()
vm.goBackTo = from.path
window.jQuery(vm.$el).modal('show')
window.jQuery(vm.$el).on('hide.bs.modal', () => {
vm.$router.push(vm.goBackTo)
})
})
},
beforeRouteLeave(to, from, next) {
setTimeout(() => {
next()
}, 200)
},
methods: {
fetchRecords() {
// Do list request
}
}
}
An example of my router object: The first route will open a modal on the router-view modal and the second will open only on the default router-view
{
name: 'leads.quick-add',
path: '/leads/quick-add',
components: { modal: QuickAdd },
},
{
name: 'leads.index',
path: '/leads',
component: Main,
},
It works great! The problem comes when I access my modal URL (does not matter if it's directly or navigating) and the default component has a child component! The child component get away on that case!
There is attached some screenshots to help you out understand what happens...
Image 1
Image 2
At Image 1 we can 2 components where the number 1 is my default component on my VueRouter and the number 2 is his child!
Ar the Image 2, after clicking on the + Quotation button the modal is loaded and the component number 2 getaway!
Any ideas on how to do it keeping the others components?
Just to be clear I want to do it by routing and no calling my modal manually!
########################## Edit
I am trying to do something like that instead of check on beforeRouterEnter method:
{
name: 'leads.show.quotations.create',
path: '/leads/:id/quotations/create',
components: {
default: Show,
'default.tab': Quotations,
modal: Add
},
meta: {
requiresAuth: true
}
},
Where there is a sub-router-view but it does not work!
Thinking about possibilities I've added this issue on the github repo:
https://github.com/vuejs/vue-router/issues/1030
I did this in a project at work. It is quite simple actually, the hard part lies in mixing the jquery that you have there, and maybe the css to position a modal, since it's entry point is the router-view inside your component I recommend using the package portal-vue to move the modal content to the end of the body.
Here is a working exemple: https://codesandbox.io/s/vue-router-modal-j10t2
First create a Modal Component that receives it's child by props:
<template>
<portal to="modal">
<div class="modal-wrapper">
<div class="overlay" #click="$router.back()"></div>
<div class="modal">
<!-- you can use v-bind to pass down all props -->
<component :is="component" v-bind="$attrs"/>
</div>
</div>
</portal>
</template>
<script>
export default {
name: "Modal",
props: ["component"],
};
</script>
<style scoped>
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.modal {
position: absolute;
z-index: 1;
margin: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 5em;
border: 1px solid #ccc;
border-radius: 1em;
box-shadow: 0 0 1em #00000033;
}
.overlay {
z-index: 1;
position: absolute;
width: 100vw;
height: 100vh;
background-color: #00000055;
}
</style>
Then you can use the props in routes to assign the content for a given route:
import Home from "./Home.vue";
import Modal from "./Modal.vue";
import Content from "./Content.vue";
const router = new VueRouter({
routes: [
{
path: "/",
component: Home,
children: [
{
path: "create",
component: Modal,
props: {
component: Content
}
}
]
}
]
});
Since the modal is a child route of '/', the Home component needs to render the router-view:
<template>
<div>
Hi i'am home
<router-view />
<router-link to="/create">open modal</router-link>
</div>
</template>
And the App.vue needs to render the portal target, so the modal goes to the end of your content (it makes positioning the modal a lot easier):
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" width="25%" />
<router-view />
<portal-target name="modal" />
</div>
</template>
<script>
export default {
name: "App",
};
</script>
And that's it
Related
I'm using vue 3 with vue router, and I used the same code from the docs for transitioning the route, and it worked at first, but after some changes in the code in other files, it decided not to work ;-;
Here is my app.vue
<template>
<Nav />
<router-view v-slot="{ Component }">
<transition name="Fade">
<div>
<component :is="Component" />
</div>
</transition>
</router-view>
</template>
<script>
import Nav from "#/components/Nav.vue";
export default {
name: "HomeView",
components: {
Nav,
},
};
</script>
<style scoped>
.Fade-enter-from,
.Fade-leave-to {
opacity: 0;
transform: translateX(120px);
}
.Fade-enter-active,
.Fade-leave-active {
transition: all 0.5s ease-in;
}
</style>
and here's the Main Route
<template>
<div>
<WText />
<Softwares />
</div>
</template>
<script>
import WText from "#/components/WText.vue";
import Softwares from "#/components/Softwares.vue";
export default {
components: {
WText,
Softwares,
},
};
</script>
The other route (contact) is just an empty vue file, nothing special.
transition tag works when inner content re-renders (which could mean Component variable change, setting v-if="true" to v-if="false" and viceversa.), wrapping <component> tag with div will keep a constant dom element existing. Getting rid of wrapper div (or force rerender when Component variable changes which is not a good way to do it.)
I am just wondering, how to structure my code to make my sticky <Header /> component change its background-color when intersecting with other components (in this case with <Hero /> and <Footer />.
To make things more complicated, I use vue-router.
Link to my CodeSandbox
The structure is as follows:
App.vue
<template>
<ul class="nav">
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<router-link to="/about">About</router-link>
</li>
</ul>
<Header />
<router-view />
</template>
views/Home.vue
<template>
<Child1 />
<Child2 />
<Hero />
<Child3 />
<Footer />
</template>
<script>
import Hero from "#/components/Hero";
import Child1 from "#/components/Child1";
import Child2 from "#/components/Child2";
import Child3 from "#/components/Child3";
import Footer from "#/components/Footer";
export default {
components: {
Hero,
Child1,
Child2,
Child3,
Footer,
},
};
</script>
When I follow some tutorials on yt, the authors use the IntersectionObserver, so I wanted to give it a try:
Header.vue
<template>
<section
class="header"
>
<div class="header__title"
:class="{
header__scroll: isContrastActive,
}"
>
I am an awesome header that is changing it's background colour <br />
when intersecting with other components
</div>
</section>
</template>
<script>
export default {
data() {
return {
isContrastActive: false,
observer: null
};
},
methods: {
activateObserver() {
this.observer = new IntersectionObserver(
([entry]) => {
console.log("isIntersecting: ", entry.isIntersecting);
if (!entry.isIntersecting) {
this.isContrastActive = true;
} else {
this.isContrastActive = false;
}
},
{ rootMargin: "-5% 0px 0px 0px" }
);
document
.querySelectorAll(".observer")
.forEach((el) => this.observer.observe(el));
},
},
mounted() {
this.activateObserver();
},
};
</script>
<style scoped>
.header {
position: sticky;
top: 0;
width: 100vw;
height: auto;
z-index: 10;
}
.header__title {
background-color: yellow;
color: black;
padding: 8px 4px;
text-align: center;
}
.header__scroll {
background-color: orange;
}
</style>
Also added the class="observer" to the <Hero /> and <Footer /> components.
But it doesn't seem to work.
I have read, that in vue the use of querySelector is considered to be an antipattern.
If this is the case then how I could structure my code to get what I want?
Thanks in advance
EDIT1:
I noticed, that if I change the text in the <Header /> component and save then everything seems to work just fine.
But on page refresh, it is still not working.
Think that the querySelectorAll could be the reason.
SOLUTION 1:
The most obvious solution is of course:
mounted() {
setTimeout(() => {
this.activateObserver()
}, 500)
},
but it ain't an elegant solution :/.
The code you're using makes the assumption all observed elements are already in DOM.
You need to make the observable available to all your pages (use the preferred state management solution).
Your activateObserver should become:
createObserver() {
someStore().observer = new IntersectionObserver(
([entry]) => {
if (!entry.isIntersecting) {
this.isContrastActive = true;
} else {
this.isContrastActive = false;
}
},
{ rootMargin: "-5% 0px 0px 0px" }
);
}
Then, in any page which has observed elements, use template refs to get all elements you want observed.
In onMounted you start observing them, in onBeforeUnmount you stop observing them.
const observed = ref([]);
onMounted(() => {
observed.value.forEach(someStore().observer.observe)
})
onBeforeUnmount(() => {
observed.value.forEach(someStore().observer.unobserve)
})
How you select your elements using template refs is irrelevant for this answer. The point is you need to start observing the DOM elements referenced after the component has been mounted and unobserve them before unmount.
Note: in theory, it is possible that any of your views is rendered before the observer has been added to the store. (In practice it's a rare case, so you probably don't need this).
However, if that's the case, you want to create a watcher for the observer in your pages and start observing only after you have the observer, which might be after the page has been mounted.
The principle is simple: you need both observer and observed for this to work. observer is available after it is added to store, observed are available after onMounted until onBeforeUnmount in any of the pages containing them.
It is my first time to work with Vue or Web. I have been to working with C to write firmware.
Depends on sidebar state, I would like to change padding-right value of body in App.vue.
whenever button is pushed, isNavOpen value is changed
import Vue from "vue";
export const store = Vue.observable({
isNavOpen: false
});
export const getters = {
getNavOpen: () => store.isNavOpen
}
export const mutations = {
setIsNavOpen(yesno) {
store.isNavOpen = yesno;
},
toggleNav() {
store.isNavOpen = !store.isNavOpen;
}
};
so I would like to change padding-right value of body in App.vue
<template>
<div id="app">
<nav class="main-nav">
<div class="logo">my.company</div>
<Burger></Burger>
</nav>
<Sidebar>
<ul class="sidebar-panel-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</Sidebar>
<router-view />
</div>
</template>
<script>
import Burger from "./components/Menu/Burger.vue";
import Sidebar from "./components/Menu/Sidebar.vue";
import { store, getters, mutations } from '#/store.js'
export default {
name: "app",
components: {
Burger,
Sidebar
},
data:{
return: {
isSidebarOpen: this.$getters.getNavOpen()
}
}
};
</script>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
border: 0;
margin: 0;
padding-left: 350px;
font-family: "Lato";
height: 100%;
background: rgb(101, 31, 87);
background: linear-gradient(
45deg,
rgba(101, 31, 87, 1) 0%,
rgba(225, 113, 87, 1) 48%,
rgba(249, 248, 113, 1) 100%
);
}
</style>
I read pages. However it is so hard to combine these codes for me
change style
vue sidebar tutorial
or Is any way to implmement to change padding by sidebar states?
Some thing might be missing in your second block but i assume that you successfully can use true or false value as isSideBarOpen. All you need to do is to use style binding(you can also use class binding but you need to define specific class for padding right) Here is what you need:
<div id="app" :style="(isSideBarOpen) ? 'padding-right: 10px;' : ''">
/* code */
</div>
I'm trying to have the navigation on my Vue app to have a main menu up top populated by all the root level routes, and a side menu if the route has any children. Like so:
The current Design I have has the main navigation with routing links on the top with the router-view below. I have been able to get the side menu working so it it only shows up when I choose Travellers and updates the components/content correctly. However I'm having trouble routing things correctly, when I click on one of the links in the sub menu it does not append to the current path. So when I click on View when I'm in localhost/Traveler and click View the url changes to localhost/View/ instead of localhost/Traveler/View. Also the selection on the top menu gets unselected when I choose something in the child menu.
And I cannot get to the pages via something like localhost/Traveler/View only localhost/View
I started rereading the documentation on nested routes as I began making this post and I think I realized that I should be creating an new router at each level which is not something I have done in my code below.
I'm also not sure how to access the children of the current route. I've tried to display them like so:
<h2>Route: {{ $route.name }}</h2>
<ul id="example-1">
<li v-for="child in $route.children">
{{ child.name }}
</li>
</ul>
But I get nothing. Should they be passed as Params or something? Or are the not that easily accessible?
Any advice or help will be greatly appreciated.
Root
Contains top Menu-Nav with router links and router-view below.
<template>
<div id="app" class="container-fluid">
<div class="row">
<div style="width:100%">
<nav-menu params="route: route"></nav-menu>
</div>
</div>
<div class="row">
<div>
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import NavMenu from './nav-menu'
export default {
components: {
'nav-menu': NavMenu
},
data() {
return {}
}
}
</script>
Top Nav-Menu
Gets populated with the routes
<template>
<nav class="site-header sticky-top py-1">
<div class="container d-flex flex-column flex-md-row justify-content-between">
<a class="nav-item" v-for="(route, index) in routes" :key="index">
<router-link :to="{path: route.path, params: { idk: 1 }}" exact-active-class="active">
<icon :icon="route.icon" class="mr-2" /><span>{{ route.display }}</span>
</router-link>
</a>
</div>
</nav>
</template>
<script>
import { routes } from '../router/routes'
export default {
data() {
return {
routes,
collapsed: true
}
},
methods: {
toggleCollapsed: function (event) {
this.collapsed = !this.collapsed
}
}
}
</script>
Traveler Page/View
Currently the Traveller Page which has a side bar menu and another router view for the content:
<template>
<div id="app" class="container-fluid">
<div class="wrapper">
<traveler-menu params="route: route"></traveler-menu>
<div id="content">
<router-view name="travlerview"></router-view>
</div>
</div>
</div>
</template>
<script>
import TravelerMenu from './traveler-menu'
export default {
components: {
'traveler-menu': TravelerMenu
},
data() {
return {}
}
}
</script>
Side Bar/ Traveler Menu
<template>
<nav id="sidebar">
<div class="sidebar-header">
<h3>Route's Children:</h3>
</div>
<ul class="list-unstyled components">
<li>
<a class="nav-item" v-for="(route, index) in travelerroutes" :key="index">
<router-link :to="{path: route.path, params: { idk: 1 }}" exact-active-class="active">
<icon :icon="route.icon" class="mr-2" /><span>{{ route.display }}</span>
</router-link>
</a>
</li>
</ul>
</nav>
</template>
<script>
import { travelerroutes } from '../../router/travelerroutes'
export default {
data() {
console.log(travelerroutes);
return {
travelerroutes,
collapsed: true
}
},
methods: {
toggleCollapsed: function (event) {
this.collapsed = !this.collapsed
}
}
}
</script>
Routes
import CounterExample from 'components/counter-example'
import FetchData from 'components/fetch-data'
import HomePage from 'components/home-page'
import TestPage from 'components/test-page'
import Travelers from 'components/Traveler/traveler-root'
import { travelerroutes } from './travelerroutes'
export const routes = [
{ name: 'home', path: '/', component: HomePage, display: 'Home', icon: 'home' },
{ name: 'counter', path: '/counter', component: CounterExample, display: 'Counter', icon: 'graduation-cap' },
{ name: 'fetch-data', path: '/fetch-data', component: FetchData, display: 'Fetch data', icon: 'list' },
{ name: 'test-page', path: '/test-page', component: TestPage, display: 'Test Page', icon: 'list' },
{
name: 'traveler-root', path: '/traveler', component: Travelers, display: 'Travelers', icon: 'list', children: travelerroutes
}
]
Traveler Routes (travelerroutes.js)
import TestPage from 'components/test-page'
import ViewTravelers from 'components/Traveler/TravelerPages/view-travelers'
export const travelerroutes = [{
name: 'View',
path: '/View',
display: 'View', icon: 'list',
components: {
travlerview: TestPage
}
},
{
name: 'Create',
path: '/Create',
display: 'Create', icon: 'list',
components: {
travlerview: ViewTravelers
}
},
{
name: 'Edit',
path: '/Edit',
display: 'Edit', icon: 'list',
components: {
travlerview: ViewTravelers
}
}];
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { routes } from './routes'
Vue.use(VueRouter)
let router = new VueRouter({
mode: 'history',
routes
})
export default router
app.js
import Vue from 'vue'
import axios from 'axios'
import router from './router/index'
import store from './store'
import { sync } from 'vuex-router-sync'
import App from 'components/app-root'
import { FontAwesomeIcon } from './icons'
// Registration of global components
Vue.component('icon', FontAwesomeIcon)
Vue.prototype.$http = axios
sync(store, router)
const app = new Vue({
store,
router,
...App
})
export {
app,
router,
store
}
Let me know if you you need anymore details, context or code.
You don't need to create new router instances, instead watch the $route property and create the sidebar nav menu as it changes. You'll need to pull the child routes from the $router.options.routes. Here's an example:
const router = new VueRouter({
routes: [{
name: 'home',
path: '/',
component: {
template: '<div>Home</div>'
}
},
{
name: 'foo',
path: '/foo',
component: {
template: '<div>Foo<router-view></router-view></div>'
},
children: [{
name: 'foo.baz',
path: '/baz',
component: {
template: '<div>Baz</div>'
}
}, {
name: 'foo.tar',
path: '/tar',
component: {
template: '<div>Tar</div>'
}
}]
},
{
name: 'bar',
path: '/bar',
component: {
template: '<div>Bar<router-view></router-view></div>'
},
children: [{
name: 'bar.zim',
path: '/zim',
component: {
template: '<div>Zim</div>'
}
}, {
name: 'bar.zug',
path: '/zug',
component: {
template: '<div>Zug</div>'
}
}]
}
]
})
new Vue({
el: '#app',
router,
data() {
return {
children: []
}
},
watch: {
$route: function(current) {
const route = this.$router.options.routes.find(route => route.path === current.path)
if (route && Array.isArray(route.children)) {
this.children = route.children
} else if (route) {
this.children = []
}
}
}
})
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
width: 100%;
height: 100%;
}
#top {
border: 1px solid black;
}
#top ul {
display: flex;
flex-direction: row;
justify-content: flex-start;
list-style-type: none;
}
li {
padding: 1rem;
text-align: center;
text-transform: uppercase;
}
li a {
text-decoration: none;
font-weight: bold;
color: black;
}
#sidebar {
height: 50%;
width: 100px;
border: 1px solid black;
}
#content {
width: 50%;
}
#content,
#content>div {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<div id="top">
<ul>
<li v-for="item in $router.options.routes" :key="item.path" :style="{ 'background-color': $route.name.includes(item.name) ? 'rgba(197,225,165,1)' : 'white' }">
<router-link :to="item.path">{{ item.name }}</router-link>
</li>
</ul>
</div>
<div style="display: flex; flex-direction: row; height: 100%; width: 100%;">
<div id="sidebar">
<ul>
<li v-for="item in children" :key="item.path" :style="{ 'background-color': $route.name === item.name ? 'rgba(197,225,165,1)' : 'white' }">
<router-link :to="item.path">{{ item.name.split('.').pop() }}</router-link>
</li>
</ul>
</div>
<div id="content">
<router-view></router-view>
</div>
</div>
</div>
I made some modifications to DigitalDrifter's answer where I find the children using the template syntax. I'm pretty sure my answer will stop working after another level of children so I'm going to say DigitalDrifter still has a better answer.
Also I'm not sure how preserve the sub menues route (localhost/Traveller) so it isn't searching the children of (locathost/Traveller/View) when I click on something like view. Right now I'm doing it in kind of a janky way:
v-for="(route, index) in $router.options.routes.filter(x=>x.path==$route.path||$route.path.includes(x.path))"
Thet full SFC without styling is here:
<template>
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components" v-for="(route, index) in $router.options.routes.filter(x=>x.path==$route.path||$route.path.includes(x.path))">
<li v-for="child in route.children">
<a class="nav-item" :key="index">
<router-link :to="{path: route.path+'/'+child.path}" exact-active-class="active">
<icon :icon="route.icon" class="mr-2" /><span>{{ child.path }}</span>
</router-link>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
Edit: I know vue has the data I want associated with the routers views as shown here,
I'm just not sure how to access those properties.
Update 1/29/2019:
I figured out that all you need to do to get the path is by using $Route.matched[0].path you can learn more here.
Now I have been able to simplify the menu into an SFC like this:
<template>
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components" v-for="(route, index) in $router.options.routes.filter(x=>x.path==$route.matched[0].path)">
<li v-for="child in route.children">
<a class="nav-item" :key="index">
<router-link :to="route.path+'/'+child.path" exact-active-class="active">
<icon :icon="route.icon" class="mr-2" /><span>{{ child.name }}</span>
</router-link>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
CSS not included.
I am trying to create a splash screen (loading-screen) in Vue JS that after a few seconds fades away, revealing my defaut view. I have tried several approaches but just can't get any to work. The closest is this example on CodePen But ideally the component wouldn't be inside main.js and instead inside its own component. Despite that the below code won't work.
My main.js is as below:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
// FILTERS
Vue.filter('snippet', function(value) {
return value.slice(0,100);
});
Vue.component('loading-screen', {
template: '<div id="loading">Loading...</div>'
})
new Vue({
router,
store,
render: h => h(App),
data: {
isLoading: true
},
mounted () {
setTimeout(() => {
this.isLoading = false
}, 3000)
}
}).$mount("#app");
and my App.vue is as follows
<template>
<div id="app">
<loading-screen v-if="isLoading"></loading-screen>
<Top/>
<router-view/>
<PrimaryAppNav/>
</div>
</template>
<script>
import Top from './components/Top.vue'
import PrimaryAppNav from './components/PrimaryAppNav.vue'
export default {
name: 'app',
components: {
Top,
PrimaryAppNav
}
}
</script>
A LoadingScreen.vue component could look like this:
<template>
<div :class="{ loader: true, fadeout: !isLoading }">
Loading ...
</div>
</template>
<script>
export default {
name: "LoadingScreen",
props: ["isLoading"]
};
</script>
<style>
.loader {
background-color: #63ab97;
bottom: 0;
color: white;
display: block;
font-size: 32px;
left: 0;
overflow: hidden;
padding-top: 10vh;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.fadeout {
animation: fadeout 2s forwards;
}
#keyframes fadeout {
to {
opacity: 0;
visibility: hidden;
}
}
</style>
Be aware that the loader needs to be aware if loading is done to be able to fade out. You need to check that in your App as well, so it's not showing while it still needs to prepare data. Otherwise, information from the app part in the background could be leaking (for example scrollbars might be visible on the LoadingScreen). So App.vue could have a template like this:
<template>
<div id="app">
<LoadingScreen :isLoading="isLoading" />
<div v-if="!isLoading">
...your main content here...
</div>
</div>
</template>
If you want to have the LoadingScreen divs to disappear completely, you need to manage the state of the fadeout animation in the App.vue itself, making it a bit more complicated (I'd probably use two props for LoadingScreen then: isLoading and fadeout, where fadeout is a callback that gets called in LoadingScreen as soon as the fadeout animation is complete).
I have prepared a codesandbox for you with the state management inside the LoadingScreen.
This is a working App.vue with a splash screen:
<template>
<div id="app">
<v-app :light="!nav.dark" :dark="nav.dark">
<transition name="slide-fade" mode="out-in">
<router-view></router-view>
</transition>
</v-app>
<div v-if="loading" style="position:absolute; width: 100%; height:100%; top:0; left:0; z-index:10000; background-color:white">
<div style="margin-left: auto; margin-right: auto">
Loading...
</div>
</div>
</div>
</template>
<script>
export default {
name: "app",
data: () => ({
loading: true
}),
mounted() {
setTimeout(() => {
this.loading = false
}, 3000)
}
}
</script>
Note that there is a z-index trick and mounted is in App component.
You can of course create a component just for loading, so it will become:
App.vue
<template>
<div id="app">
<v-app :light="!nav.dark" :dark="nav.dark">
<transition name="slide-fade" mode="out-in">
<router-view></router-view>
</transition>
</v-app>
<loader v-if="loading"/>
</div>
</template>
<script>
import Loader from "./Loader"
export default {
name: "app",
data: () => ({
loading: true
}),
mounted() {
setTimeout(() => {
this.loading = false
}, 3000)
}
}
</script>
Loader.vue
<template>
<div style="position:absolute; width: 100%; height:100%; top:0; left:0; z-index:10000; background-color:white">
<div style="margin-left: auto; margin-right: auto">
Loading...
</div>
</div>
</template>
<script>
export default {
name: "loader"
}
</script>
After that, I strongly suggest that you use dynamic components for your router components, Top and PrimaryAppNav. Like that they will load during your splash screen. You will find how to do that very easily in my answer in this thread (only section 2 is relevant for you): here
At beginning show fullscreen splash (with class binding listens for loadedApp).
When vuejs mounted, (or your any other process completed then, change data loadedApp = true.
Then fadeoutHide style will run and hides your splash
<div class="fullscreen-splash" :class="{fadeoutHide:loadedApp}">
// splash logo etc
</div>
data() {
return {
loadedApp: false
}
},
mounted() {
this.loadedApp = true
}
.fadeoutHide {
animation: fadeoutHide .5s forwards;
}
#keyframes fadeoutHide {
to {
opacity: 0;
visibility: hidden;
}
}