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>
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 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>
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've already seen some user with the same problem:
Lightgallery not working
but i still can't get it to work, here's my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</li>
<li <a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</ul>
</div>
</div>
</body>
</html>
Can't figure out what i'm missing.
Thanks for any help
You haven't connect main file - lightgallery.js.
Connect it.
Can you please check this code and see if it does any help? Hope it does :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
<li ><a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
</ul>
</div>
</body>
</html>