I have setup 2 router outlets(two different divs on the screen that load different stuff). I am able to open pages in but not the other router outlet, so I guess Im missing something.
app.routes.ts
export const appRoutes: Routes = [
{ path: 'component1', component: component1},
{ path: 'component2', component: component2, outlet: 'router2'},
];
app.component.html
<router-outlet></router-outlet>
<router-outlet name="router2"></router-outlet>
routing to component2
<button routerLink="/event-gallery">go</button>
Related
I have created a front development environment using docker compose.
The configuration is nginx + nuxt3 + vuetify3.
I created vue in the Pages directory.
It took 120000ms to display it.
It's so slow that I can't even develop.
I'm trying to see why it's taking so long.
and it looks like it is getting all the vuetify code.
Also some of the requests are giving errors.
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VChip/VChip.css
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VGrid/VGrid.css
http://host.docker.internal/_nuxt/node_modules/nuxt/dist/pages/runtime/app.vue
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VNoSsr/VNoSsr.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VColorPicker/util/index.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VList/VListChildren.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VProgressCircular/VProgressCircular.css?v=afbc0ebb
The access is from host.docker.internal:80 leading to host machine:80 -> nginx container:80 -> nuxt container:3000.
The nuxt server is run by this command.
npx nuxi dev
I don't know why the above massive requests are taking place.
It also does not appear to be normal. What is wrong?
I am new to both nuxt and vuetify.
I am also not familiar with how webpack works.
Having the same issue, maybe it would be wise to add your nuxt config.
Maybe someone can figure out what to do..
Mine is as followed:
{
...
css: ['vuetify/styles'],
build: {
transpile: ['vuetify'],
},
modules: [
// eslint-disable-next-line require-await
async (_options, nuxt) => {
// #ts-ignore
nuxt.hooks.hook('vite:extendConfig', (config) => config?.plugins && config.plugins.push(vuetify({ autoImport: true })))
},
],
...
And plugins/vuetify.ts
// #ts-ignore
import {defineNuxtPlugin, useRuntimeConfig} from '#app'
import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import {aliases, mdi} from 'vuetify/iconsets/mdi-svg'
import { md3 } from 'vuetify/blueprints'
import {useDark} from '#vueuse/core'
export default defineNuxtPlugin((nuxtApp) => {
const isDark = useDark().value
const vuetify = createVuetify({
ssr: true,
// https://next.vuetifyjs.com/en/features/blueprints/
blueprint: md3,
components,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi,
},
},
// https://next.vuetifyjs.com/en/features/theme/
theme: {
defaultTheme: isDark ? 'dark' : 'light',
themes: {
dark, // theme defined earlier
light, // theme defined earlier
},
},
})
nuxtApp.vueApp.use(vuetify)
})
I have to merge two angular applications into one major angular application. Hence, now i am having two styles.css files in one angular application. On running this application after merging both, css is going completely for the angular application.
Is there any way by which we can call this two style.css files dynamically depending on the requirement? Or I need to check each class one by one?
I recommend you to use two different layouts, each one is a component, so each one has a different set of styles. That it's really easy wit angular router.
In your routing module:
// Layout 1
{
path: '',
component: Layout1Component,
children: [
{ path: 'pageL1_1', component: PageL1_1Component },
{ path: 'pageL1_2', component: PageL1_2Component }
]
},
// Layout 2 routes goes here here
{
path: '',
component: Layout2Component,
children: [
{ path: 'pageL2_1', component: PageL2_1Component },
{ path: 'pageL2_2', component: PageL2_2Component }
]
},
In your app.component.html:
<router-outlet></router-outlet>
The layouts templates has to include the element to in order to show child navigation componets.
IMPORTANT: Each layput controller should disable view encapsulation so styles applies ti child components:
#Component({
selector: 'app-layout_1',
templateUrl: './layout_1.component.html',
styleUrls: ['./layout_1.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class Layout1Component implements OnInit {
...
}
What I want to do is:
1) in app.js to be able to use
import Vue from 'vue'
import Time from './vue/components/Time'
Vue.component('vue-time', {
template: '<span class="foo bar">Hi</span>'
})
new Vue({
el: 'header',
components: { Time }
})
2) in Time.vue:
<template>
<div>current time</div>
</template>
<script>
module.exports = {
}
</script>
<style>
</style>
Is this possible? All is implemented using encore-webpack and symfony4.
Thanks.
in app.js registered 2 components:
Time - registered localy
vue-time - registered global
if you want register Time global add in app.js this:
*do not use name Time https://developer.mozilla.org/uk/docs/Web/HTML/Element/time
Vue.component(`Time`, Time)
in app.js delete this:
components: { Time }
then use tag <time></time> anywhere in your application
I have a header that has menu consist of categories which they are the same component but different query.
The first call from parent to child is executed perfectly but if i navigateto another category from inside this child component i get error!
I know this is something wrong with the link when i navigate inside this child which make [routerLink] updated instantly.
Also if i navigate from category child component to login component which is separated component will give me the same error!
Note: Same question has been asked in this link with no answer
Nacim Idjakirene Question
Router configuration
const APP_ROUTES: Routes = [
{path: 'landingpage', component: LandingpageComponent },
{path: '', component: IndexComponent, children: [
{path: '', component: HomeComponent},
{path: 'category/:cate', component: CategoryComponent },
{path: 'post/:id', component: PostComponent },
{path: 'profile/:id', component: ProfileComponent }
] },
{path: 'login', component: LogginComponent }
];
See the image
Problem Solved by me after a deep search. i saw the response of a person called
brandonroberts: your router link is invalid and you either need to set a terminal
route
and this solved my problem...
[routerLink]="['','category', cat.id]"
I am finding problem while multiple routing, its loading in single router-oulet how to tell the component to load in specific named outlet? I found out that there is a property in RouterConfig from which i can use outlet to name the router-outlet but i don't know to link it with HTML.
https://angular.io/docs/ts/latest/api/router/index/RouterConfig-type-alias.html
Define a UI with two router outlets..
<div>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
</div>
Then have a router config that routes a component into that space.
[{
path: 'parent/:id',
children: [
{ path: 'a', component: MainChild },
{ path: 'b', component: AuxChild, outlet: 'aux' }
]
}]
NOTE: the parent route's id parameter will be provided to both children. Remove it if you aren't providing an id.