I am new to Vue.js. I want to add header, content and footer to the page using components. I get an extra div in the code - how can I remove it?
<!doctype html>
<html class="h-full" lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<header></header>
<main role="content"></main>
<footer></footer>
</div>
<script src="js/app.js"></script>
</body>
</html>
Additional question: how to make another layout for the login page? There will be no header and footer on this page.
Source files
index.html
<!doctype html>
<html class="h-full" lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
App.vue
<template>
<Layout>
<template v-slot:header>
<Header/>
</template>
<router-view></router-view>
<template v-slot:footer>
<Footer/>
</template>
</Layout>
</template>
<script>
import Layout from './layouts/TheLayout'
import Header from './components/TheHeader'
import Footer from './components/TheFooter'
export default {
components: {
Layout,
Header,
Footer
},
}
</script>
TheLayout.vue
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {}
</script>
<div> can not be removed.
You can use computed properties for another layout.
<template>
<Layout>
<template #header>
<Header v-if="isBoard"/>
</template>
<router-view></router-view>
<template #footer>
<Footer v-if="isBoard"/>
</template>
</Layout>
</template>
<script>
import Layout from './layouts/BaseLayout'
import Header from './components/TheHeader'
import Footer from './components/TheFooter'
export default {
computed: {
isBoard() {
return this.$route.name === 'Board'
}
},
components: {
Layout,
Header,
Footer
},
}
</script>
Related
This is my main container component,
<template>
<div class="main-content">
<slot />
</div>
</template>
This is my topbar component,
<template>
<!-- top bar with back component -->
<div class="top-bar">
<div class="back"><i class="far fa-arrow-left"></i></div>
<div class="page-name">
<div class="main-topic">Management</div>
<div class="dot"></div>
<div class="sub-topic">Products</div>
</div>
</div>
<!--End top bar with back component -->
</template>
This is my product component (With main container & top bar)
<template>
<Main>
<Topbar />
</Main>
</template>
<script setup>
import Main from "../components/Main.vue";
import Topbar from "../components/Topbar.vue";
</script>
Here my CSS not working I have imported all my CSS files into the main HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/negus.css">
<link rel="stylesheet" href="assets/css/all.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="app"></div>
<script src="assets/scripts/jQuery.min.js"></script>
<script src="assets/scripts/jQuery-resize.js"></script>
<script src="assets/scripts/script.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
It should look like this,
But it look like this,
I don't know why my CSS is not working. Appreciate it if somebody can help. Thanks
Try importing those CSS files in your App.vue like this-
<style>
#import "./assets/css/reset.css";
#import "./assets/css/negus.css";
#import "./assets/css/all.css";
#import "./assets/css/style.css";
</style>
Property "dynamicslotname" was accessed during render but is not defined on instance. at in vue3.
I am testing the dynamic slot of vue3, but i missing the question "Property "dynamicslotname" was accessed during render but is not defined on instance. at "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/lodash#4.17.20/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<base-layout>
<template v-slot:[dynamicSlotName]>
<p>Hello</p>
</template>
</base-layout>
</div>
</body>
<script>
const baseLayout = {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
</div>
`
};
const helloVue = {
components: {
baseLayout
},
data() {
return {
dynamicSlotName: "header"
}
}
}
Vue.createApp(helloVue).mount('#app')
</script>
</html>
The slot name should be written in lowercase not in camelCase like dynamicslotname instead of dynamicSlotName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/lodash#4.17.20/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<base-layout>
<template v-slot:[dynamicslotname]>
<p>Hello</p>
</template>
</base-layout>
</div>
</body>
<script>
const baseLayout = {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
</div>
`
};
const helloVue = {
components: {
baseLayout
},
data() {
return {
dynamicslotname: "header"
}
}
}
Vue.createApp(helloVue).mount('#app')
</script>
</html>
For more details please check https://v3.vuejs.org/guide/template-syntax.html#caveats
I'm new on vue.js but I can not understand why it still says {{ title }} instead Hello world!
new Vue({
el:'#app',
data: {
title:"Hello World!"
}
});
<html>
<head>
<title></title>
</head>
<body>
<div id="#app">
{{ title }}
</div>
<script src="/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</body>
</html>
I can not understand what is wrong but I'm just copying and pasting from tutorial
You have to remove the # in <div id="#app">
Here is the full code :
new Vue({
el:'#app',
data:
{
title:"Hello World!"
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<p> {{ title }} </p>
</div>
<script src="script.js"></script>
</body>
</html>
<html>
# means id, you don't need to put id="#app", that's repetitive.
Besides that, you should load vue before you use new Vue.
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
{{ title }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data() {
return {
title: "Hello World"
}
}
});
</script>
</body>
</html>
I use Windows, here I included script for vue, I didn't install vue, just use script.
The title of page is visible, yet "Hello vue" is not shown.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Vue-basis</title>
</head>
<body>
<script>
<div id="app">
<h1>Hello Vue</h1>
</div>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
I am very new to using VueJS and was wondering if there is a way to only show a button (that contains a slot) to only show if there is a button value given to the slot.
I'm using BootstrapVue Modals and the code is as follows:
I was not able to successfully get the modal running in the snippet but a screenshot of the opened modal is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<b-btn #click="showModal" class="modalBtn">
<slot name="modalOpenBtn">Open Me</slot>
</b-btn>
<b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
<h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
<p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>
<div slot="modal-footer" class="w-100 d-flex align-items-center">
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalCloseBtn">btn 1</slot>
</b-btn>
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalOkBtn">btn 2</slot>
</b-btn>
</div>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
components: { App },
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
});
</script>
</body>
</html>
You can conditonally render any element with Vues v-if directive:
// generic
<button v-if="myBooleanCondition">...</button>
// exmaple
<button v-if="something == true">...</button>
https://v2.vuejs.org/v2/guide/conditional.html