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
Related
I have a small Vue project that isn't in a build environment that is just a bunch of JS files and uses Vue from the CDN
I would like to use FullCalendar in my Vue project and ideally use the official FullCalendar Vue component, but this only seems to be available for projects using the CLI build environment.
Is there a Vue component available for non-build projects that I could use that still implements the normal <FullCalendar /> tag?
About CDN see
new Vue({
el: '#app',
mounted() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
}
})
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href='https://cdn.jsdelivr.net/npm/fullcalendar#5.8.0/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar#5.8.0/main.min.js'></script>
</head>
<body>
<div id="app">
<div id='calendar'></div>
</div>
</body>
</html>
I'm struggling with Vue refs. If I define them in my main Vue instance's template, they work fine, but if I define them within a component template, they don't. What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
main.js, version 1
const app = new Vue({
el: '#app',
template: `
<div ref="divRef">
<button ref="buttonRef">Submit</button>
</div>
`
});
result (matches expectation)
> app.$refs
> {buttonRef: button, divRef: div}
main.js, version 2
Vue.component('demo-page', {
template: `
<div ref="divRef">
<button ref="buttonRef">Submit</button>
</div>
`
});
const app = new Vue({
el: '#app',
template: '<demo-page ref="componentRef"></demo-page>'
});
expected result
> app.$refs
> {componentRef: VueComponent, buttonRef: button, divRef: div}
actual result
> app.$refs
> {componentRef: VueComponent}
$refs are scoped within a component. That's the reason, you can only see the componentRef in the $refs of the app itself. The other $refs are accessible within the scope of each component. So, try to access the $refs within the scope of that component.
If you are defining a ref on an element also having the attribute v-for on it, this.$refs.refName will return you an array of DOM elements. Keep in mind that $refs are not reactive unlike data properties.
See also the documentation to $refs with child component instances and the documentation to the ref="" attribute.
I've been learning Vue.js and I tried to have the root instance not erase the html content I put inside. The idea being that I could have a normal html page and Vue "watching" the main wrapper and if it run into a vue component it will be render by vue. I've managed to do that when I import the CDN of vue but not with the vue cli somehow. I don't understand the difference.
I made this codepen loading vue.js by the cdn and it render without problem
<div id="app">
<h1>My Vue.js App</h1>
<p>{{ message }}</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello world'
}
});
https://codepen.io/cvallee/pen/dLKVEP
But in codesandbox where it use vue cli nothing is render, the content of the root element flash and then disappear from the dom. No matter what I put into the main div it is erase as soon as the app mount. https://codesandbox.io/s/m5qvm40nkx
I think the issue has to do with the way that the CodeSandbox loads the Vue app and triggers the initial render. If you add an App.vue file and change the main.js file to
import Vue from "vue";
import App from "./App.vue";
// Vue.config.productionTip = false;
new Vue({
el: "#app",
render: h => h(App)
});
and the index.html to
<!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>codesandbox</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
it works for me this way. Here is the working version - https://codesandbox.io/s/84ox08k24j
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
this is my code for my module that will be compiled by gulp laravel elixir
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios,VueRouter);
axios.defaults.headers.common['X-CSRF-TOKEN'] = Laravel.csrfToken;
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes,
});
const app = new Vue({
router,
// render: h => h(app)
}).$mount('#app')
and this my app.blade.php the main template
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- <router-link> will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
Im really having a hard time because when i compile it i receive an error that router-link is not registered but when i put my script tags on the upper part
app is not found
how can i make this thing work?
IIUC: an html renders at server-side, with a script injected to it, the script contains your compiled vue component, and will mount it to a node in the dom. Which means, the php file containing router-link will only be passed through php parser, who have no idea what router-link is. Only front end compilers know how to handle router-link, so you need to put it in your vue component's template (to make it go through front end compiler who understands it). Also, when you're mounting to #app, contents inside it will be overwritten by vue, so avoid putting useful things inside, but reorganize your html or put them in your vue component instead.