I'm trying to work through a tutorial that uses Vue and have gotten stuck. I'm not sure why my buttons are not showing appropriately. Where am I messing up? Thanks in advance for your help.
From the images:
Expected Outcome: Buttons at top right
Actual Result: Buttons at top right are missing
App.vue:
<template>
<div id="wrapper">
<nav class="navbar is-dark">
<div class="navbar-brand">
<router-link to="/" class="navbar-item"><strong>Djackets</strong></router-link>
<a class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navbar-menu">
<div class="navbar-end">
<router-link to="/summer" class="navbar-item">Summer</router-link>
<router-link to="/winter" class="navbar-item">Winter</router-link>
<div class="navbar-item">
<div class="buttons">
<router-link to="/log-in" class="button is-light">Log In</router-link>
<router-link to="/cart" class="button is-success">
<span class="icon"><i class="fas fa-shopping-cart"></i></span>
<span>Cart</span>
</router-link>
</div>
</div>
</div>
</div>
</nav>
<section class="section">
<router-view/>
</section>
<footer class="footer">
<p class="has-text-centered">Copyright (c) 2021</p>
</footer>
</div>
</template>
<style lang="scss">
#import '../node_modules/bulma';
</style>
index.html:
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
router/index.js:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Expected Vue: Missing icons on top right
Actual Result: Missing icons on top right
Okay, so the code is all correct, the issue has to do with sizing. The device display is small and activated the mobile version which is not configured yet.
Upon using a larger screen, or adjusting the zoom if you can not use a larger screen, the buttons appear as they should.
Related
i have succeed create router link in v-if but the url is does not change, what is expected is url change so if user click "go back one page" it is goes to previews page
<template>
<div class="container-fluid">
<div class="row" v-if="productAllData">
<div v-for="item in productAll" :key="item._id" class="col-md-2 col-xs-6">
<div class="card card-margin-right card-buttom" #click="clickProductById(item._id)">
<img v-bind:src="item.image[0].filename" />
<div class="card-body">
<h5 class="card-title">{{item.name}}</h5>
<p>
{{item.description}}<br>
<span class="font-weight-bold">{{item.fprice}} / {{item.unit}}<br></span>
stock : {{item.quantity}}<br>
</p>
</div>
</div>
</div>
</div>
<product-by-id :id="id" :test="`/productall/${id}`" v-if="productByIdData">
<router-link :to="`/productall/${id}`"></router-link>
</product-by-id>
</div>
</template>
in above code there is router link in v-if
<product-by-id :id="id" :test="`/productall/${id}`" v-if="productByIdData">
<router-link :to="`/productall/${id}`"></router-link>
</product-by-id>
and that code is working, since if i console log there is "/productall/603aaaf5dead94fee94d2811"
but why my url is not change still "http://localhost:8080/productall" what i expected is "http://localhost:8080/productall/603aaaf5dead94fee94d2811"
I set up an example routing implementation. A couple of components with a router configuration.
/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import Home from '#/components/stackoverflow/router-params-example/Home'
import ProductAll from '#/components/stackoverflow/router-params-example/ProductAll'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/productall/:id',
name: 'productall',
component: ProductAll,
props: true
}
]
export default new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
App.vue
<template>
<div id="app" class="container">
<router-view></router-view>
</div>
</template>
Home.vue
<template>
<div class="parent">
<h4>Home</h4>
<div class="row">
<div class="col-md-6">
<router-link class="btn btn-primary" :to="{ name: 'productall', params: { id: productId } }">Product All</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
productId: '603aaaf5dead94fee94d2811'
}
}
}
</script>
ProductAll.vue
<template>
<div class="product-all">
<h4>Product All</h4>
<div class="row">
<div class="col-md-6">
<router-link class="btn btn-secondary" :to="{ name: 'home' }">Back</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true
}
}
}
</script>
I am trying to have dynamic routes in my application.
I have main route '/blogs' which contains 3 static blogs, I want is that each blog should be rendered with its own content like '/blogs/blog-1' and for blog 2 like '/blogs/blog-2', I have tried with docs but couldn't understand as I am beginner.
Here is my code to all the components,
router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/views/Home.vue'
import Blogs from './components/views/Blogs.vue'
import Blog_1 from './components/blogs/Blog_1';
import Blog_2 from './components/blogs/Blog_2';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
component: Home,
},
{
path: "/blogs",
component: Blogs,
children: [
{
path: 'blog-1',
component: Blog_1
},
{
path: 'blog-2',
component: Blog_2
}
]
},
],
scrollBehavior(to,) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth',
top: 0
}
}
},
});
export default router;
Here is Blog.vue which have all the static blogs not full but half
<template>
<!-- ***** Blog Start ***** -->
<section class="section" id="blog">
<div class="container">
<!-- ***** Section Title Start ***** -->
<div class="row">
<div class="col-lg-12">
<div class="center-heading">
<h2 class="section-title">Blog Entries</h2>
</div>
</div>
<div class="offset-lg-3 col-lg-6">
<div class="center-text">
<p>
Integer molestie aliquam gravida. Nullam nec arcu finibus,
imperdiet nulla vitae, placerat nibh. Cras maximus venenatis
molestie.
</p>
</div>
</div>
</div>
<!-- ***** Section Title End ***** -->
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/1x/blog-item-01.png" alt="" />
</div>
<div class="blog-content">
<h3>
Online Presence of Business
</h3>
<div class="text">
As Covid-19 came, it throttled small and medium businesses in
great depth. Not every one can recover from it.
</div>
Read More
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img
height="220"
width="370"
src="assets/images/1x/blog-item-02.jpg"
alt=""
/>
</div>
<div class="blog-content">
<h3>
<a href="#"
>Why Having a Website is Important for a small business?</a
>
</h3>
<div class="text">
The number of small businesses with a website is surprisingly
low despite the growth in technology.
</div>
Read More
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img
height="220"
width="370"
src="assets/images/1x/blog-item-03.jpg"
alt=""
/>
</div>
<div class="blog-content">
<h3>
Impact of Advertisment on Customer
</h3>
<div class="text">
Have you ever thought, why giant companies such as apple,
google, Samsung invest millions on advertisement?
</div>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ***** Blog End ***** -->
</template>
As I want to click on read more ,so it should go to the complete article which should be in another component.
Thank You
You can use route params to match those slugs:
routes: [
{
path: "/",
component: Home,
},
{
path: "/blogs/:slug", // This `:` syntax means it's a variable
name: 'blogs',
component: Blogs
},
],
(You don't need the child routes you had.) When you use a route param like that, the :slug segment can be replaced by whatever you like. So if you do visit a route like /blogs/blog-1, it will match that route. And the dynamic portion will be available in the component as
this.$route.params.slug
In this example, that would show "blog-1". Also, notice that I gave the route a name "blogs". That's so that when you want to visit that route, you can use a <router-link> like:
<router-link :to="{ name: 'blogs', params: { slug: 'blog-1' }}">
Blog 1
</router-link>
I have a simple Vue.Js App I need to render but the app is not being rendered at all.
I followed all the examples shown online and everything looks correct but I can't spot the problem. I am using Vue.js on an ASP.net application with webpack
My Index.cshtml:
#section scripts{
<environment names="Development,Production,Staging">
<script src="~/dist/js/home/bundle.js" asp-append-version="true"></script>
</environment>
}
<div id="app">
</div>
My main app.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.config.performance = true;
Vue.use(VueRouter);
import store from './store/store';
import { router } from './router/router';
import App from './App.vue';
new Vue({
el: '#app',
store,
router,
render: h => h(App)
});
My App.vue:
<template>
<div>
<div class="container">
<div class="columns">
<div class="column is-3">
<section class="section">
<aside class="menu">
<p class="menu-label">
Examples
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: 'counter' }">Counter</router-link>
</li>
</ul>
<p class="menu-label">
About
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: 'moduleinfo' }">Module info</router-link>
</li>
</ul>
</aside>
</section>
</div>
<div class="column is-9">
<section class="section">
<transition name="component-fade"
mode="out-in">
<router-view></router-view>
</transition>
</section>
</div>
</div>
</div>
<notifications group="global" />
</div>
</template>
<script>
import Vue from 'vue'
import Notifications from 'vue-notification'
Vue.use(Notifications)
export default {
name: 'App'
}
</script>
<style scoped>
</style>
There are no errors being thrown, the app simply doesnt render and the only html on the page when i run the application is
<div id=app>
</div>
In my main App component I have the template setup like this:
<div v-if="authenticated" id="app">
<template v-if="user && metadata">
<registration v-if="user.user_type.match(/patient/i) && !metadata.registration_complete"/>
<template v-else>
...
</template>
</template>
</div>
and the Registration component's template looks like:
<template>
<div class="patient-registration">
<div class="container">
<router-view/>
</div>
</div>
</template>
I want the Registration component to render it's children routes, so I have the routes set up this way:
{
path: '/registration',
// name: 'Registration',
component: Registration,
children: [
{
path: '',
name: 'Agreements',
component: Agreements
}, {
path: 'information',
name: 'PersonalInfo',
component: PersonalInfo
}
]
},
But the output html renders Registration within itself before rendering it's child Agreement like this:
<div data-v-6062c645="" class="patient-registration">
<div data-v-6062c645="" class="container">
<div data-v-6062c645="" class="patient-registration">
<div data-v-6062c645="" class="container">
<div data-v-0bd02235="" data-v-6062c645="" class="agreements">
...
</div>
</div>
</div>
</div>
</div>
I'm using this type of pattern else where and it's working as expected. I am not sure why in this case Registration component is being rendered within itself once before rendering it's children. How would I get it to render like this?
<div data-v-6062c645="" class="patient-registration">
<div data-v-6062c645="" class="container">
<div data-v-0bd02235="" data-v-6062c645="" class="agreements">
...
</div>
</div>
</div>
I have installed vue cli, when i try to show my navbar(component) it shows but when i try to show my footer(component)it shows.
When i show other cms pages the navbar and footer are together the text is not displaying between...
Find the image, Output:
This is my navbar where it is a component under component folder
<template>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/" class="nav-link">Home</router-link>
</li>
<li class="nav-item">
<router-link to="/contacts" class="nav-link">Contacts Us</router-link>
</li>
<li class="nav-item">
<router-link to="/login" class="nav-link">Login</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Navbar'
}
</script>
This is my HomePage where it is a component under component folder
<template>
<div>
test
</div>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
This is App.vue Where it is inside the Src/ Folder
<template>
<div id="app">
<app-header></app-header>
<app-footer></app-footer>
<router-view></router-view>
</div>
</template>
<script>
import Navbar from '#/components/Navbar'
import Footer from '#/components/Footer'
export default {
name: 'App',
components: {
'app-header': Navbar,
'app-footer' : Footer
}
}
</script>
This the Footer Component
<template>
<div class="hello">
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? Visit the homepage or read our getting started guide.</p>
</div>
</footer>
</div>
</template>
<script>
export default {
name: 'Footer',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
In your App.vue template you have the order of the elements wrong.
Move the <app-footer> below rhe <router-view>:
<template>
<div id="app">
<app-header></app-header>
<router-view></router-view>
<app-footer></app-footer>
</div>
</template