I am trying to build the web using VueJs with Bootstrap but whenever I add the Bootstrap imports, the website goes blank. Even when I add the bootstrap components, it is blank too. Could anyone guide me please?
Here is my imports on main.js
import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
App.use(BootstrapVue)
createApp(App).mount('#app')
My App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<nav class="navbar navbar-light bg-light"> -- this is the bootstrap components
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav> --- bootstrap components
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
OP achieved a working setup by using Vue2 as somewhat suggested here: importing bootstrap in vuejs
Related
app.vue
<template>
<div id="nav">
<router-link :class="{active: $route.name === 'Home'}" to="/">Home</router-link>
<router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
</div>
<router-view/>
</template>
<script>
export default {
mounted() {
this.$store.commit('updateCartFromLocalStorage')
}
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-color: rgb(245, 245, 245);
}
#nav {
padding: 10px;
width: 100%;
height: 30px;
background-color: white;
line-height: 30px;
}
a {
font-weight: bold;
color: darkgray;
text-decoration: none;
margin: 0 5px 0 5px;
font-size: 1.25rem;
&.active {
color: #2c3e50;
}
}
.text-center {
text-align: center;
}
</style>
I'm getting an error:
Failed to compile.
./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js)
The template root requires exactly one element vue/valid-template-root
How can I fix it? I tried adding more div but it is still not working.
There are two roots in your component:
<template>
<div id="nav"> 1️⃣
<router-link :class="{active: $route.name === 'Home'}" to="/">Home</router-link>
<router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
</div>
<router-view/> 2️⃣
</template>
To create a single root, wrap the entire template in another element, such as a div:
<template>
<div>
<div id="nav">
<router-link :class="{active: $route.name === 'Home'}" to="/">Home</router-link>
<router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
</div>
<router-view/>
</div>
</template>
You need to add one root level element for vue2
<template>
<div id="nav">
<router-link :class="{active: $route.name === 'Home'}" to="/">Home</router-link>
<router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
<router-view/>
</div>
</template>
Here div is root-level element.
However, if you are using vue3, you don't need one root level element.
I followed this tutorial on adding meta in a router for multiple layouts
it works but the component inside the layout not working
Dynamic Layouts
// update // in DevTools, I don't see the components anywhere just the layouts
here's my code
App.vue
<div id="app">
<component :is="this.$route.meta.layout || 'div'">
<router-view />
</component>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import weappLayout from '../layouts/webappLayout.vue'
import noLayout from '../layouts/no-layout.vue'
import signIN from '../views/sign-in.vue'
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { layout: weappLayout }
},
{
path: '/login',
name: 'sign-in',
component: signIN,
meta: { layout: noLayout }
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
if the components is needed to look at let me know, thank you in advance <3
sign-in.vue
<template>
<div>
<form class="form-signin">
<img
class="mb-4"
src=""
alt=""
width="72"
height="72"
/>
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input
type="email"
id="inputEmail"
class="form-control"
placeholder="Email address"
required
autofocus
/>
<label for="inputPassword" class="sr-only">Password</label>
<input
type="password"
id="inputPassword"
class="form-control"
placeholder="Password"
required
/>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me" /> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in
</button>
<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
</form>
</div>
</template>
<script>
export default {
name: "sign-in"
};
</script>
<style >
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
Home.vue
<template>
<div class="home">
</div>
</template>
<script>
// # is an alias to /src
export default {
name: "Home",
components: {
}
};
</script>
/// SOLVED Finally //
it was to add slot tag in the layout template
thanks,
I have made a Vue CLI project and then started making my project.
I have made the following component named Navigation.vue:
<template>
<nav>
<div class="nav_container">
<ul>
<li><router-link to="/home">Home</router-link></li>
<li class="dropdown">
<a class="touch"
>Network Settings <i class="fas fa-angle-down"></i
><i class="fas fa-angle-up"></i
></a>
<div class="dropdown-content">
<router-link to="/dhcpIP">DHCP IP</router-link>
<router-link to="/staticIP">Static IP</router-link>
</div>
</li>
<!-- <li><router-link to="/files">Import/Export Files</router-link></li> -->
<li><router-link to="/update">Update</router-link></li>
</ul>
</div>
</nav>
</template>
<script>
export default {
name: 'Navigation',
}
</script>
<style scoped>
/* Some style */
</style>
I have then imported it in App.vue:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
</script>
<style scoped>
/* Some style */
</style>
finally I have main.js which I haven't modified:
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
and I get the following error:
ERROR Failed to compile with 1 errors 8:10:25 PM
error in ./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
\App.vue
9:8 error 'Navigation' is defined but never used no-unused-vars
The component is clearly used, yet I receive that error. I don't understand why.
You are importing Navigation but never use it on your script, declare it as component:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
export default {
components: {
Navigation
},
}
</script>
<style scoped>
/* Some style */
</style>
I have a navbar which need to change between languages with two different buttons. I've used Vue-CLI and Vue-I18N for template syntax but I can't change languages between them. Solutions at documentation didn't helped me so much. My Header.vue , main.js and App.vue are below. I'm waiting for your answers. Thanks.
Header.vue
<template>
<div>
<b-navbar
toggleable="lg"
type="light"
variant="light"
>
<b-navbar-brand href="#">{{ $t('johnDoe') }}</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse
id="nav-collapse"
is-nav
>
<b-navbar-nav>
<b-nav-item href="#">{{ $t('home') }}</b-nav-item>
<b-nav-item href="#">{{ $t('about') }}</b-nav-item>
<b-nav-item href="#">{{ $t('projects') }}</b-nav-item>
<b-nav-item href="#">{{ $t('education') }}</b-nav-item>
<b-nav-item href="#">{{ $t('contact') }}</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-button
size="sm"
class="my-2 my-sm-0 btn-info"
type="submit"
#click="i18n.locale = 'en'"
>{{ $t('english') }}</b-button>
<b-button
size="sm"
class="my-2 my-sm-0"
type="submit"
#click="i18n.locale = 'tr'"
>{{ $t('turkish') }}</b-button>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: 'HelloI18n'
}
</script>
<i18n>
{
"en": {
"johnDoe": "John Doe",
"home": "Home",
"about": "About Me",
"projects": "Projects",
"education": "Education",
"contact": "Contact",
"english": "English",
"turkish": "Turkish"
},
"tr": {
"johnDoe": "John Doe",
"home": "Anasayfa",
"about": "Hakkımda",
"projects": "Projelerim",
"education": "Eğitim",
"contact": "İletişim",
"english": "İngilizce",
"turkish": "Türkçe"
}
}
</i18n>
<style scoped>
</style>
App.vue
<template>
<div id="app">
<Header></Header>
</div>
</template>
<script>
import Header from "./components/Header.vue";
export default {
name: "app",
components: {
Header,
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
main.js
import '#babel/polyfill'
import 'mutationobserver-shim'
import Vue from "vue";
import './plugins/bootstrap-vue'
import App from "./App.vue";
import i18n from './i18n'
Vue.config.productionTip = false;
new Vue({
i18n,
render: h => h(App)
}).$mount("#app");
You have a typo in the button #click event. i18n is accesible from the template with "$i18n" and no "i18n" so, your button code must be:
<b-button
size="sm"
class="my-2 my-sm-0 btn-info"
type="submit"
#click="$i18n.locale = 'en'"
>{{ $t('english') }}</b-button>
I am stuck making a modal component for my app in VueJS. I want to be able to put it in its own component for reusability, be able to pass custom content and have multiple modals.
I made the component and it looks like this from the VueJS docs:
Modal.vue
<template>
<div ref="modal">
<script type="text/x-template" id="modal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
Header
</slot>
</div>
<div class="modal-body">
<slot name="body">
Body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
Footer
</slot>
<button class="btn btn-primary" #click="$emit('close')">
Button
</button>
</div>
</div>
</div>
</div>
</transition>
</script>
</div>
</template>
<script>
export default {
components: { },
props: ['header', 'footer', 'body', 'button'],
data: () => ({
showModal: false
}),
methods: {
open () {
console.log('Opening modal')
this.showModal = true
}
}
}
</script>
<style>
#modal {
/*color: #000;*/
}
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
/*padding: 20px 30px;*/
background-color: #25262D;
color: #FEFEFE;
border-radius: 3px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-size: 1.2em;
}
.modal-header {
border-radius: 3px;
background-color: #202128;
border: none;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
/*background-color: #202128;*/
border: none;
}
.modal-footer {
text-align: center;
border: none;
}
.modal-footer .btn {
font-size: 1.0em;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
I add a modal in my App.vue:
<button #click="openUpdatedModal()" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal">
Launch Updated Modal
</button>
<modal ref="updatedModal" v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<div slot="header">custom header</div>
</modal>
<script>
import Modal from './components/Modal'
export default {
components: { Modal },
data: () => ({
showModal: false
}),
methods: {
openUpdatedModal () {
this.$refs.updatedModal.open()
}
}
}
</script>
When I click the button I get the text in console "Opening modal" but nothing happens.
I can summon it and it works if I have ALL the code in App.vue
What am I missing?
I made it work by creating a ModalComponent.vue and removing the script tag as Phil suggested in the comments. Here's the code.
ModalComponent.vue:
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default{
}
</script>
Here's how I defined my component:
Vue.component('modal', ModalComponent);
Modal button in markup:
<button id="show-modal" #click="showModal = true">Show Modal</button>
And the modal component being called on the page:
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
It's worth noting that I had to declare the showModal property wherever I use my modal.