I've been making a chrome extension with Vue 3 + VueRouter.
With the router.push functionality I was trying to change router-view content to a different component, meaning showing a different UI to users.
However, no matter what methods I use, I just can't change the view.
So my App.vue has router-view and I have two components that I would like to show one at a time.
Component One is About and Component Two is Home.
What I did was that I created a method that fires off on onClick event.
So, the first view is Home (users see this view first). Then when a user clicks a button, it will swap the UI component, showing About Page. I used router.push('/about') to swap the UI component to About.vue. It was unsuccessful.
I am aware of the fact that the chrome extensions are not really a web page so the routing is different but nothing seems to work.
I've checked this reference and tried it and sadly it was futile
How to display router view with VUEJS3 in a build project for google chrome extension
router.js
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path: "/index.html",
component: () => import("../src/App.vue"),
name: "App",
},
{
path: "/about",
component: () => import("../src/views/About.vue"),
name: "About",
},
];
const router = createRouter({
history: createWebHashHistory("index.html"),
routes,
});
export default router;
main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import store from "./store/index";
import router from "./router";
const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");
App.vue (when I was using router-view)
<template>
<router-view />
</template>
If I do router-view like that on Chrome extension, nothing is showing
So I did this also to change the view by using router-link. It didn't work as well. By clicking router-link tag, nothing was working.
<template>
<Login />
<router-link to="/about"> About </router-link>
</template>
methods: {
routerPush() {
this.$router.push("about");
this.$router.push("/about"); tried both / and without /
},
}
<template>
<Login />
<span #click="routerPush"> About </span>
</template>
Did the above code to just to try out the router.push functionality. It was unsuccessful
I fixed it. The reason Vue router wasn't working is because I didn't have a renderer Vue to mount
You will need to have a component Renderer.vue or whatever that would contain in template and mount that component in main.js createApp(Renderer) like this
Related
I am importing a component, but it does not render. The component is capitalized. I think there is something wrong with the import statement because when I remove it and replace with "Navbar", it renders, but if i keep the import then it does not render.
import styles from "./style";
import { Billing, Business, CardDeal, Clients, CTA, Footer, Navbar, Stats, Testimonials, Hero }
from "./components";
const App = () => { return (
<div className="bg-primary w-full overflow-hidden">
<div className={`${styles.paddingX} ${styles.flexCenter}`}>
<div className={`${styles.boxWidth}`}>
<Navbar />
</div>
</div>
</div>
);
};
export default App;
import React from 'react';
const Navbar = () => {
return (
<div>Navbar</div>
);
};
export default Navbar;
import Navbar from "./Navbar";
import Billing from "./Billing";
import CardDeal from "./CardDeal";
import Business from "./Business";
import Clients from "./Clients";
import CTA from "./CTA";
import Stats from "./Stats";
import Footer from "./Footer";
import Testimonials from "./Testimonials";
import Hero from "./Hero";
export {
Navbar,
Billing,
CardDeal,
Business,
Clients,
CTA,
Stats,
Footer,
Testimonials,
Hero,
};
If i exchange the component
for basic text like "Navbar" or "Navbar" it does not render either. These 2 display when I remove the import components statement.
When i control click , it brings me to the correct Navbar component.
I am following a yt tutorial
https://github.com/adrianhajdin/project_hoobank
my repo is here: https://github.com/lukasmckaine22/userbet_landing_page
I made sure the component was capitalized. I confirmed the component actually leads to the correct component by control clicking it. I confirmed the code renders plain text only when the import is removed. I confirmed the import leads to the correct file by control clicking. I tried only importing the Navbar with and without brackets. I changed the import directory to pull the navbar directory.
I am trying to navigate to another page after clicking a button in vuetify but unable to do it. After clicking the Next Page button it should navigate to newpage.
This is the url where the button is:
http://localhost:8080/viewer/?id_product=548
Here is my code:
ProductDetailsCard.vue
<v-btn #click="this.$router.push({path: '/newpage'})">Next Page</v-btn>
router > index.js
import Vue from 'vue';
import Router from 'vue-router';
import NewPage from '../components/NewPage.vue';
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.eventNames.BASE_URL,
routes: [
{
path: '/newpage',
name: 'newpage',
component: NewPage
}
]
})
Can anyone help me?
Vuetify button supports to attribute
<v-btn to="/newpage">Next Page</v-btn>
But you problem is in diffrent place, use component without quotes, as reference to component class, not string value.
component: NewPage
your route is named, so I recommend use it calling its name:
<v-btn #click="this.$router.push({name: '/newpage'})">Next Page</v-btn>
I think you should make changes in App.vue and index.js:
for App.vue: add these: <Newpage/> and import Newpage from'#/components/Newpage'
for index.js: import Newpage from '../components/Newpage.vue'and
{ path: '/newpage', name: 'Newpage', component: Newpage }
and finally use this <v-btn to="/newpage">Next Page</v-btn> where you want!
I hope these help you! :)
right now, I'm writing a single-page-application in vue.js using vue-router. Pages like the homepage, sign-in page etc. all share a navigation and footer component. On a few pages however, I need the entire screen so that the navigation and footer shall not be displayed.
Hence, I decided to nest components and include the navigation and footer component when necessary. My problems now is, that the navigation and footer template disappeared on all pages.
Edit: A more complete demo can be found in this Github repository.
Here's a simplified version of the files I'm using:
index.html:
<div id="app">
<router-view></routerview>
</div>
router.js:
import Homepage from './homepage.vue';
import SignIn from './signin.vue';
const router = new VueRouter({
routes: [
{path: '/', component: Homepage},
{path: '/signin', component: SignIn},
]
})
homepage.vue and signin.vue components:
<template>
<navigation></navigation>
// some page-specific content
<footer-vue></footer-vue>
</template>
<script>
import Navigation from './navigation.vue';
import Footer from './footer.vue';
export default {
components: {
'navigation': Navigation,
'footer-vue': Footer,
},
}
</script>
A component without navigation and footer:
<template>
// some page-specific content
</template>
Is it even possible to nest components this way? I hope someone is able to point me into the right direction.
Both homepage.vue and signin.vue have invalid templates. e.g.
<template>
<navigation></navigation>
<h1>The homepage</h1>
<footer-vue></footer-vue>
</template>
This is not allowed as it has 3 root nodes. See https://v2.vuejs.org/v2/guide/components.html#A-Single-Root-Element
You need to wrap it to get it to work:
<template>
<div>
<navigation></navigation>
<h1>The homepage</h1>
<footer-vue></footer-vue>
</div>
</template>
Note that this limitation does not apply to functional components and is also expected to be lifted for all components in Vue 3.
Much more worrying is that you're not seeing any errors messages for this. You really need to look into that as it suggests there's something very much amiss with your development setup.
An example of the error message you should be seeing:
new Vue({
el: '#app',
template: '<div></div><div></div>'
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<div id="app">
</div>
I am learning react so forgive me if this has been asked a million times but I have browsed and no solution has fixed my issue. Apart from fixing the issue I would like to understand how the mechanics under the hood work...
I have 2 simple components NavBar and Home. Code below for both.
NavBar:
import React from "react";
class NavBar extends React.Component {
render () {
return (
<nav className="navbar sticky-top navbar-light" style={NavBarStyle}>
<a className="navbar-brand" href="/">
<img src={require('./av_tiny.png')} style={ImageStyle} alt="Logo"></img>
</a>
</nav>
)
}
}
const NavBarStyle = {
// some styling
}
const ImageStyle = {
width: '100px',
height: '50px',
marginLeft: '20px'
}
export default NavBar;
Home:
import React from "react";
class Home extends React.Component {
render(){
return(
<h1>Home</h1>
);
}
}
export default Home;
When I navigate between routes, the whole DOM re-renders. I don't want the NavBar to re-render. My routes are declared in App.js as per below, and I have tried moving <NavBar /> outside the <Router> tags and the other way around. I have also tried putting <NavBar /> in its own <div> tags. Still the app behaves the same, whenever I change the URL it re-renders everything. How can this be avoided and what should I read up to properly understand the mechanics?
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
//individual components
import Home from "./Home";
import SignInPage from "./Components/Login";
import NavBar from "./Components/Layout/NavBar"
//Routing to components
class App extends React.Component {
render() {
return(
<div>
<NavBar/>
<Router>
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={SignInPage}/>
</Router>
</div>
)
}
}
export default App;
EDIT:
I think I should've mentioned that re-renders happen when I navigate by manually changing the URL in the browser. I have some code on my /login route that does this.props.history.push('/'); after successful login and the DOM does not re-render. Just {SignInPage} gets unmounted and {Home} gets mounted. I would expect the same behavior when navigating between the pages manually or am I missing something?
You're using <a> elements to create your links. These cause the browser to navigate to the new URL without triggering the JavaScript that would cause the content to be dynamically updated using React.
Use the <Link> component from whatever React Router library you are using instead.
Further reading:
Anchor tags vs Link components in React
The reason why it re-renders hole dom is that the router is changing root properties.
Take a look at nested routers, it will give you an idea of how to achieve your goal Nested routes with react router v4 / v5
I am trying to build a layout using single-file components in Vue.js, with dynamic population and URLs using Vue-router. (I'm using the webpack template via vue-cli as well.)
It works as expected for my app.vue file-- containing the nav, sidebar, page head, and <router-view>-- and the <router-view> content appeared as expected when the correct <router-link> is clicked... until I tried to add subcomponents to the add-load component being called to the <router-view>. Now, nothing appears at all, despite not throwing any errors.
Admittedly, I am not basing my structure on any examples, as I couldn't really find any doing it the way I was hoping to. I wanted to use nested components by calling them like custom elements-- I think this makes the code much easier to read and maintain. I'm not entirely sure how to structure it otherwise, to be honest. Using multiple <router-view>s as siblings to each other seems counterintuitive to me.
I've tried a variety of combinations of how and where to import and call the components, and nothing has worked. The only way I can get any content to load is if I only call a single component for path: '/add-load'. Is it just impossible to use multiple components outside of your base app.vue? I find that hard to believe. Here's what I started with.
From my index.js:
import AddLoad from '#/components/AddLoad'
import AddLoad from '#/components/ProgressSteps'
import Stops from '#/components/Stops'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
},
{
path: '/add-load',
components: {
AddLoad,
ProgressSteps}
}
]
})
From my App.vue file (the multiple component behavior that I'd like to mimic is shown here):
<template>
<div id="app">
<div class="wrapper">
<Sidebar/>
<div class="container-fluid">
<TopNav/>
<MobNav/>
<div class="container-fluid">
<PageHead/>
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from '#/components/Sidebar'
import TopNav from '#/components/TopNav'
import MobNav from '#/components/MobNav'
import PageHead from '#/components/PageHead'
export default {
name: 'App',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
}
</script>
From my AddLoad.vue file:
<template>
<div class="add-load">
<div class="content-container container-slim">
<progress-steps/>
<router-link to="#stops">Stops</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import ProgressSteps from '#/components/ProgressSteps'
export default {
name: 'AddLoad',
component: ProgressSteps
}
</script>
Here is a link to a codesandbox, so you can see the full functionality. https://codesandbox.io/s/7k520xk0yq