In my app there's no App.vue component assigned to the #app element. Instead, in my index.html, I have a <router-view> element which displays some Home.vue component by default or whatever other component depending on the route.
However I want to display a certain component (informing about user online status) at all times regardless of the current route. But how can I achieve this if it's not possible to call a component from index.html? Or is it possible?
index.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"></head>
<body>
<div id="app">
<!-- Component handling user status (connected / not connected) would go here -->
<router-view></router-view>
</div>
<script src="dist/build.js"></script>
</body>
</html>
Place your component above <router-view> (where the comment indicates <!-- Component handling user status would go here -->):
<div id="app">
<user-presence-status></user-presence-status>
<router-view></router-view>
</div>
Be sure to include the component definition when mounting the root component, as shown in the following example:
import UserPresenceStatus from '#/components/UserPresenceStatus';
new Vue({
el: '#app',
compnents: {
UserPresenceStatus
}
);
demo
Related
I have created a project using vue-cli#4 and its working fine but I have done some changes in main.js and it is not working anymore.
//main.js
import Vue from "vue";
import App from './App.vue'
//Vue.config.productionTip = false;
new Vue({
el: "#root-app",
//commented components property when using render and mount
components: {
App
},
data: {
name: "amandeep Singh"
}
// render: h => h(App),
}); //.$mount('#app')
App.vue file
<template>
<div>
testingggg
<img alt="Vue logo" src="./assets/logo.png">
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
Index.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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>admin</title>
</head>
<body>
<div id="root-app">
{{name}}
<app></app>
</div>
<!-- built files will be auto injected -->
</body>
</html>
It's showing nothing even "name" value is not interpolated.
But if I Uncomment
render: h => h(App),
and
.$mount('#app')
everything works fine.
So my question why does not it with these two commented. I have checked many examples and seen projects where they have not to use render function, all they have used is "el" property to mount vue to Html and everything works.
So someone can please what's happening here? What I am doing wrong?
How can I make work without render and mount and why it is necessary?
You are not rendering the component you imported.
First, you imported the App.vue component which is the base holder of your components: import App from './App.vue'. Good!.
Next, You told Vue about the component you have imported so Vue knows about it (register): components: { App },. Good!
Now, what is left for you to do is to render the App.vue component. Do so by adding back the render function:
render: h => h(App),
Or like so:
template: "<App/>",
You should be good to go now.
Ref: https://github.com/vuejs-templates/webpack-simple/issues/29
I am in learning phase of vue.js and here is my index.html code as follows:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<todo-item></todo-item>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
and code of index.js is as follows:
Vue.component('todo-item', {
template: '<li>Todo 1</li><li>Todo 2</li>'
})
var app = new Vue({
el: '#app'
})
now in the output, I am getting only one <li>Todo 1</li> not the second Todo 2.
Can anyone let me know why it is happening?
In case I repeat the <todo-item></todo-item> in index.html then it is repeating Todo 1, should not it display Todo 2 after Todo 1?
I have gotten the answer, It was happening because
Component template should contain exactly one root element.
and I was using two <li> in the same template without a root element.
So I have changed in the template as
template: '<ul><li>This is a todo</li><li>Another work</li></ul>'
and removed <ul> from index.html. It is working fine now.
I am pretty much stuck on it and I'm not even sure if what I was trying is possible.
Here's my project if needed:
https://drive.google.com/open?id=1lty3rzUs1h7Rtw5tsN92WeaTBJw2fqVy
Updated:
I'm not sure how to display it any better as this is the best it gets.. Basically im passing NestedComponent into Component which is getting passed into app.js which is rendering it into the index.html. That's it, for some reason doesn't work.
// "main.js" the Vue file that renders to the index.html
new Vue({
el: '#app',
components: { Component},
template: '<Component/>'
})
import Component from 'Component'
// "Component.vue" that is getting passed into the above "app.js"
<template lang="html">
<div>
<p>{{ title }}</p>
<h1>Hi!</h1>
<NestedComponent/>
</div>
</template>
<script>
import NestedComponent from 'NestedComponent'
export default {
name: 'Component',
components: {
NestedComponent
},
data: {
title: 'Hello'
}
}
</script>
// "NestedComponent.vue" a nested component that is getting passed onto it's parent Component "Component.vue"
<template lang="html">
<div>
<p>{{ im a nested component }}</p>
</div>
</template>
<script>
export default {
name: 'NestedComponent',
components: {
},
data: {
}
}
</script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">{{title}}</div>
<script type="text/javascript" src="/script.js"></script>
<script src="app.js"></script>
</body>
</html>
There are a few things that I think is causing the problem:
You are using .vue files. They require special loaders via
Webpack or similar tool. They will then be converted into a normal
.js file. In your case, you have a CDN version of Vue so these features will not be available to you.
As people have mentioned before the use of import and export is not supported by the browser natively. This again needs to run through the Webpack or similar tool.
Find similar information in the docs
https://v2.vuejs.org/v2/guide/single-file-components.html
So I've installed the latest Vue CLI and have a project set up. I am familiar with the concepts of Vue but I need help with structure. Can somebody guide me as to how I could create a navigation bar that would be used across all pages and would contain vue-router links for pages? My first thought was to make a component Navbar.vue and somehow get that into the App.vue so that it is rendered before any <router-view></router-view>. Is this the proper way to do it? Would I instead try to put it inside index.html? I am confused as to how to do this. I am using bootstrap for css.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>foo.ca</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue:
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
You should add into App.vue. Index.html will only render the app.
Remember that router-view will only render the component you set(in the router configs) for the route inside the <router-view></router-view> call. App is just like a layout for your app.
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<!-- Assuming your navbar is looking like bootstrap -->
<navbar></navbar>
<!-- You can move container inside every page instead, if you wish so -->
<div class="container-fluid">
<div class="row">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
Just paid for a commercial licence and trying to follow the docs but can't get the animation to work
I am using Laravel 5.4 and Vue 2
<head>
<link rel="stylesheet" href="/css/animate.min.css" />
</head>
<body>
<div id="app">
#yield('content')
</div>
<script src="/js/app.js"></script> // vue file
<script src="/js/wow.js"></script>
<script>
var wow = new WOW();
wow.init();
console.log(wow); // works fine
</script>
</body>
// content
#extends('layouts.app')
#section('content')
<div class="wow slideInLeft"> // not working
<p>Test</p> // not working when applied here either
</div>
#stop
Where am I going wrong?
update, wow is being applied to my Vue components but not native html tags.
it seems that style="visibility: hidden;" is not being overwritten.
// Vue component with working wow animation
// this component is on the same page where I want to apply wow to native html
<template name="test">
<p class="wow bounceIn>Test</p> // works
</template>
wow.js happens on page load and not on scroll
I was applying height and width constraints with CSS
Removing these made it work