I want to create a landing page for a documentation and I dont any layout option. How can I create a landing that points to a Vue component directly?
---
layout: none
---
<Landing />
<script setup>
import Landing from "./components/Landing.vue"
</script>
I want one page to be empty. Just my component.
As it turns out there is no way to implement a page without layout page, home or doc in vitepress. More info.
Related
I use this code to change font of backend but login page font not change,
Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) {
$controller->addCss('/plugins/myname/myplugin/assets/css/mustyle.css');
});
how I can inject CSS file in auth page?
backend.page.beforeDisplay event doesn't get triggered on login page.
You basically have 3 options:
Simply add your custom CSS in the backend branding settings ("Styles" tab). These styles will be included in the signin page as well.
Use 'backend.auth.extendSigninView' to add your style at the bottom of the signin page:
Event::listen('backend.auth.extendSigninView', function ($controller, $firstParam) {
return '<link rel="stylesheet" href="/plugins/myname/myplugin/assets/css/mustyle.css">';
});
Use 'backend.layout.extendHead' in a similar way to put the style in your head, passing 'auth.htm' as layout param
The 2 slides on the homepage and the Revolution PLugin only needs to run for that component. I am only sharing code for one slide to keep things simple.
To get things partially working I have loaded the revolution slider js files in the head of the index file.
<script type="text/javascript" src="/revolution/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="/revolution/js/jquery.themepunch.revolution.min.js"></script>
I then load the JS needed to load the sliders at the end of the index file just before the closing body tag. This slides only load if the homepage is the initially loaded route for Vue. If I navigate away from the home page and then back the slides do not load again.
jQuery("#rev_slider_1_1").show().revolution({
// slider options ...
});
</body>
I have tried to move this code into the home component within the mounted property.
mounted () {
this.$nextTick( function() {
jQuery("#rev_slider_1_1").show().revolution({
// slider options ...
});
});
}
When I do this I get revolution is not a function
TypeError: jQuery(...).show(...).revolution is not a function
In the end I need to be able to navigate to the homepage from within my Vue App and have the sliders load without a full page load.
I'm trying to use my own Custome Layout of the vuepress as following steps:
Start from Homepage style in the VuePress Document, this is working well.
Make the T4V4Home.vue for special layout as coping from Home.vue on the theme/components folder which is ejected, and add a <h1> This is T4V4Home !</h1> in these <template> for an indication as follows.
<template>
<main
class="home"
aria-labelledby="main-title"
>
<h1> This is T4V4Home !</h1>
<header class="hero">
Add layout: T4V4Home as follow as the step of Custom Layout for Specific Pages in the VuePress Document, in the Readme.md, but <h1> This is T4V4Home !</h1> doesn't appear, seems old "Home.vue" is still used.
---
layout: T4V4Home
home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
So, remove home: true as follows, but the standard Page layout is used unexpectedly as follows.
---
layout: T4V4Home
#home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
How can I activate and use my Custom Layout T4V4Home? Thank you for your suggestions!
Where are you putting your Custom Layout component?
The Custom Layout is working fine for me with VuePress 1.3.0.
Create a SpecialLayout.vue files at .vuepress/components/SpecialLayout.vue, and copy everything in the Home.vue into it. And then add a line <h1>This is a test</h1> into it.
Change the Frontmatter in the README.md accordingly.
---
layout: SpecialLayout
heroImage: https://vuepress.vuejs.org/hero.png
heroText: test
tagline:
actionText: Quick Start →
actionLink: /guide/
features:
- title: Feature 1 Title
details: Feature 1 Description
- title: Feature 2 Title
details: Feature 2 Description
- title: Feature 3 Title
details: Feature 3 Description
footer: Made by with ❤️
---
And I successfully get the new HomePage
However, I'm not sure this is exactly what you are looking for, because as you can see in the screenshot above, you'll lose the NavBar at the top of the page because of Custom Layout.
If you want to preserve the NavBar, I suggest you try out Theme Inheritance.
Put your customized homepage component at .vuepress/theme/components/Home.vue. Yes, it needs to be named as Home.vue to replace the one in the default theme.
Create a index.js file at .vuepress/theme/index.js with content
module.exports = {
extend: '#vuepress/theme-default'
}
And don't forget to change the README.md back to normal.
I am working on a Vue.js application that I am almost done, one major bug left. The bug/issue is that when you go to /login and login to the site you get redirected via a router push (tried replace too) and when this happens I want to render the whole dashboard. Currently since in my App.vue file the router view is a different part it only renders the dashboard info part and not my header or sidebar.
Pretty much imagine a dashboard without a header or sidebar. That's what's rendering. I'd be okay if I could do something like F5 does because then it all would load correctly though taking up to 2 seconds longer on login which is okay by me.
My App.vue file template code
<template>
<div class="fade page-sidebar-fixed page-header-fixed show page-container" v-if="!pageOptions.pageEmpty" v-bind:class="{
'page-sidebar-minified': pageOptions.pageSidebarMinified,
'page-content-full-height': pageOptions.pageContentFullHeight,
'page-with-top-menu': pageOptions.pageWithTopMenu,
'page-sidebar-toggled': pageOptions.pageMobileSidebarToggled,
'has-scroll': pageOptions.pageBodyScrollTop
}">
<Header />
<Sidebar v-if="!pageOptions.pageWithoutSidebar" />
<div id="content" class="content" v-bind:class="{ 'content-full-width': pageOptions.pageContentFullWidth, 'content-inverse-mode': pageOptions.pageContentInverseMode }">
<router-view></router-view>
</div>
</div>
<div v-else>
<router-view></router-view>
</div>
</template>
Looks like I have resolved my issue, it comes from vue-router and how I am doing that if statement in my template code. So in that code I am checking a boolean value then choosing which view to render. So I had though on all of my auth pages I set the value correctly on exit. Turns out not...
This was in my Login.vue file, idea was to have on an exit of the route that it would change the boolean to false which would let me render it right. This was something I did initally but had forgotten about till about 20 minutes ago.
Upon checking this I found the value was not being changed for some reason. So as a work around in the created part of my Dashboard.vue file I set the value to false explicitly
Login.vue
beforeRouteLeave (to, from, next) {
PageOptions.pageEmpty = false;
next();
},
Dashboard.vue
created() {
PageOptions.pageEmpty = false;
...
}
The main idea is to have several base pages each one of them is operate with its own set of internal views.
You have to redirect user to another view, which is the one and only active view and this view can contains sidebar header and main part that also contains router-view, and then! you load any needed components in it.
You have to have something like that:
App component is only contains router view tag and any other pages are load into this.
The routes structure then looks like that:
As you can see, there are two base views load in App view. And then the base view can has a lot of children. The level of nested routes is up to you. Here is the contents of my app Home view:
And the MainContent component which is contains router view only:
The good example of project structure is the one generated with vue-cli. You can use it to simplify dev process with a lot of benefits and good practice solutions.
I have created a global component that i share across multiple routes. i have simplified the component below for demonstration purposes.
#name area-wrapper
<template>
<div id="area">
<div id="area-menu">
<menu/>
</div>
<div id="area-content">
<slot/>
</div>
</div>
</template>
Within the menu is a navbar which has options that will change the content of the slot which i could just turn into a component v-bind:is component.
What i have done is created several page for the routing
pages
_entity <--*** forgot to include this ***
app
index.vue
_appId.vue
new.vue
Each of these pages includes the component above and then adds in their own content for id="area-content
What i have been noticing is that the entire area-wrapper is being reloaded when i move from
website.com/app/112 (pages/app/_appId.vue)
website.com/app/11 (pages/app/_appId.vue)
I have noticed that if i move the area-wrapper to a layout then it works the problem is that the component will eventually be shared with several apps but will have a different <menu/> and layouts do not have slots
I'm not sure why vue is re-rendering the entire component even though it is shared among all the pages and is the same across each page.
What am i missing here?
If this is expected behavior my question becomes, how can i create a shared component that acts like a layout that i include in several pages without adjusting the props and have it not constantly reload
+==== UPDATE ====+
i have been trying to get nest routes to work because i believe this is what i am after. However nuxt is not generating them correctly
Per the documentation(``) i need to change my stucture to
pages
_entity
messaging
settings
index.vue
msg
index.vue
messaging.vue(wrong - changed back to index.vue) -> within here add the <nuxt-child> component
messaging.vue(need to move to _entity folder to create children)
nuxt should create the child components. However it is still continuing to create full routes. i am using nuxt-i18n will that cause a problem?
routes
...
{
path: "/:entity/messaging/messaging",
component: _8a865700,
name: "entity-messaging-messaging___en"
}, {
path: "/:entity/messaging/:msg?",
component: _1ef926cc,
name: "entity-messaging-msg___en"
}, {
path: "/:entity/messaging/settings",
component: _7b358e6a,
name: "entity-messaging-settings___en"
}
I originally created the nested route within the folder.Instead, you need to put the parent page within the root of what directory the folder exists.
pages
_entity
messaging
settings
index.vue
msg
index.vue
messaging.vue(wrong - changed back to index.vue) -> within here add the <nuxt-child> component
messaging.vue(need to move to _entity folder to create children)
You should define routing in your app as suggested here (pure Vue) or here (with vue-router). Without it you are reloading a whole page (and the app) when you change the URL.