In vue, if you declare in a file named app.vue as below, the contents of text.vue will be applied to all pages. By the way, I do not want that text.vue to be applied on certain pages. Is there a way?
app.vue
<template>
<div>
<test></test>
</div>
</template>
You can make use of v-if to conditionally show certain components depending on the page.
You haven't given any details about how your pages are organized, but assuming you are using vue-router and your routes are set up something like this:
router.map({
'/page_one': { name: 'pageOne', component: PageOneView },
'/page_two': { name: 'pageTwo', component: PageTwoView },
});
Then you can add v-if on your component to check the current route's name:
<template>
<div>
<test v-if="['pageOne'].indexOf($route.name) > -1"></test>
</div>
</template>
The array provided to the code above represents the routes on which you would like to hide the component (you can change the comparison logic to only show the component on routes you specify, if you would like the component to be hidden on the majority of routes).
Related
I have this in my data;
data(){
text: 'Go to <v-btn> to="profile">Profile</v-btn>'}
Now I need to render this with the html in my component. I tried using this
<div v-html="text"></div> but it wouldn't render. What is the right way to do this.
I think this might help you. The v-btn has an extra >.
<div>
Go To<v-btn :to="{name:'nameofcomponent'}">Profile</v-btn>
</div>
Name of the component will be the name that you've defined in your routes for your component.
For ex:
{
path: "/profile",
name: "profile",
component: () => import("path to profile file")
},
As stated in the docs, you cannot compose a template using v-html and also is it prone to XSS attack.
If you want to compile the template, you can use v-runtime-template, this will accept your template and compile it to display the vuetify components.
So I have three pages in my app. In my folder structure, I have something like this:
/verify
---complete.vue
---business.vue
---personal.vue
verify.vue
so basically verify.vue has a <nuxt-child> component that deals with my business.vue and personal.vue. What I want to happen is complete.vue even inside the parent route of /verify/complete, will be having a different layout/page template.
Is there any way to achieve this? Thanks.
I was able to fix the problem with extendRoutes in nuxt.config.js. What this does is it adds a custom route without using the folder structure. So when the /verify/complete is hit, it will resolve the component.
router: {
middleware: ['auth'],
base: '/beta/',
extendRoutes(routes, resolve) {
routes.push({
name: 'verify-complete',
path: '/account/verify/complete',
component: resolve(__dirname, 'pages/account/verify-complete.vue')
})
}
}
The idea is to track current route through $route.fullPath, and if i'ts /verify/complete, then change layout appropriately. Lets consider this markup:
verify.vue:
<template>
<section>
<h1 v-if="$route.fullPath === '/verify/complete'">Complete</h1>
<h1 v-else>Business or Personal</h1>
<nuxt-child></nuxt-child>
<section>
</template>
If it's more complicated thah changing some block, tha you should define different pages components, and load them appropriately throug <component :is="COMPONENT_NAME">:
verify.vue:
<template>
<component :is="COMPONENT_NAME"></component>
</template>
In my vue application, how to place component (slot?) in the toolbar component?
My app for example:
<template>
<toolbar>…</toolbar>
<router-view />
</template>
and all the routes are lazy loaded.
for some routes I want to place component inside toolbar component. But I can't "insert" the component as slot. and to write the component and turn on/off with v-if seems to me wrong.
I think that I expect is
<div for="toolbar">This content should in toolbar</div>
<div for="router-view">This content for router-view</div>
Is there any way to solve this?
Vue Router Named Views will come in handy.
Sometimes you need to display multiple views at the same time instead
of nesting them, e.g. creating a layout with a sidebar view and a main
view. This is where named views come in handy. Instead of having one
single outlet in your view, you can have multiple and give each of
them a name. A router-view without a name will be given default as its
name.
A view is rendered by using a component, therefore multiple views require multiple components for the same route. Make sure to use the components (with an s) option:
<template>
<toolbar><router-view name="toolbar"></router-view></toolbar>
<router-view />
</template>
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: YourAwesomeComponent,
toolbar: YetAnotherAwesomeComponent
}
},
{
path: '/home',
components: {
default: YourAwesomeHomeComponent,
toolbar: YetAnotherAwesomeComponentThatSouldBeInToolbarOnHomePage
}
}
]
})
I installed vuejs with webpack.
vue init webpack frontend
And I use vue-router at main.js
routes: [
{
path: '/',
name: 'Home',
component: HomeView
},
App.vue is like here.
<template>
<div>
<div id='toparea'></div>
<router-view></router-view>
<div id='btmarea'></div>
</div>
</template>
file structure here
Is the relation of App.vue and HomeView.vue patent-child relation ?
How can I use App.vue's data at HomeVuer.vue?
More specific:
I printed a variable at App.vue like this.
<div id='toparea'>
<span v-html="variable_foo"></span>
</div>
And I want to change at HomeView.vue at HomeView.vue's mounted step.
I found App.vue apparently is parent of HomeView.vue from vuejs devtool.
It means router view component is children of main app view component.
There is no special relation between App.vue and HomeView.vue. App.vue is for root component. HomeView is one of your components for rendering page. This component will be rendered on <router-view></router-view>. If you register some components on router, you can see them through router-view.
To pass Props you can check this: https://router.vuejs.org/guide/essentials/passing-props.html
Or you can use Vuex(https://vuex.vuejs.org/) for state management. App.vue and HomeView.vue can share their states with it.
I'm using Vue's single-file component spec (*.vue) for custom components in my application. Together with rollup and rollup-plugin-vue, I have observed the output in the DOM, for custom components I have written, to be composed of the equivalent html elements.
For example:
component-a.vue
<template>
<span>Hello World</span>
</template>
<script>
export default { name: 'component-a' };
</script>
component-b.vue
<template>
<component-a></component-a>
</template>
<script>
import ComponentA from './path/to/component-a.vue';
export default { name: 'component-b', components: { ComponentA } };
</script>
The above example, if component-a is added to the Vue mount component, will render to a the sum of the two component's template contents in the DOM, which in this case is simply a span element:
<span>Hello World<span>
Is it possible to achieve a rendered output in the DOM like the snippet below, such that custom elements' templates are represented in the DOM by tags which preserve their tag names?
<component-b>
<component-a>
<span>Hello World</span>
</component-a>
</component-b>
Inside your component-a.vue you should be able to achieve that by including some html code within your <template> tag as follow
component-a.vue:
<template>
<customelement>
// Other stuff
</customelement>
</template>
In this way you will be able to call your component-a from anywhere in your app, and to render an element named customelement.
Ideally you should use this "trick" to render standard HTML5 elements, otherwise you might see some error in your vue app console. Let me know how it goes.
Referring to the Vuejs documentation
https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
It should be noted that this limitation does not apply if you are
using string templates from one of the following sources:
String templates (e.g. template: '...')
Single-file (.vue) components
<script type="text/x-template">
If you use Vuejs like the examples above you won't get the result you wanted. So if you render your components in other ways you should get the result you wanted.