Using Vue.js I have this in my /Component/App.vue
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
name: 'app',
data () {
return {
}
}
<template>
<div id="appp">
<div id="chart-container">
</div>
</div>
</template>
In my js/examplevue.js Script I have
Vue.component('Chart', require('./components/App.vue'));
var app = new Vue({
el: '#app',
});
Then in my balde i have :
<div class=" " id="app">
<Chart>.</Chart>
</div>
<script src="{{ asset('js/examplevue.js') }}"></script>
I catch the error : Require is not defined. in Exemple.js
Usually, my vuejs code is working until i try to integer a component.
It looks like your App.vue file is malformed and there are two other errors:
in your template, the div id is mispelled as "appp" instead of "app" as defined in your examplevue.js file
I also noticed you were missing a closing } on your export default statement
If you want to use a <template> tag section you must also enclose all of your Javascript in <script> tags (see code below). :
/Component/App.vue
<template>
<div id="app">
<div id="chart-container">
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
name: 'app',
data () {
return {}
}
}
</script>
you may also have to put the following code in your examplevue.js file
import Vue from 'vue';
in order to create a new Vue instance.
Hope that helps!
Related
I'm trying to use VueThreeSixty ( https://github.com/rajeevgade/vue-360 ) component in my Vue3 + Vite project.
I imported everything, added VueThreeSixty to my components object, but it looks like I'm still missing something, can u help me figure out what?
[Vue warn]: Component is missing template or render function.
Here's my code.
<template>
<Navigation></Navigation>
<div class="tb_header">
</div>
<div class="container">
<div class="row">
<div class="w-2/5">
<VueThreeSixty
:amount="36"
imagePath="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
fileName="chair_{index}.jpg?v1"
/>
</div>
<div class="w-3/5">Sound</div>
</div>
</div> <template>
<script>
import Navigation from "../components/Navigation.vue";
import Footer from "../components/Footer.vue";
import VueThreeSixty from 'vue-360'
import "vue-360/dist/css/style.css";
export default {
data() {},
components: {
Navigation,
Footer,
VueThreeSixty
},
};
</script>
main.js
import { createApp } from 'vue'
import Home from './views/Home.vue'
import Navigation from './components/Navigation.vue'
import Footer from './components/Footer.vue'
import App from './App.vue'
import VueThreeSixty from 'vue-360'
import 'vue-360/dist/css/style.css'
import './main.css'
import './typo.css'
createApp(App)
.use(VueThreeSixty)
.mount('#app')
You should follow the documentation of https://github.com/rajeevgade/vue-360. You need to 'Vue.use' the component first and include tag vue-three-sixty. But it looks like this component does not support Vue 3 yet.
ERROE 9:5 error 'Vue' is not defined no-undef
I added "import Vue from 'vue'" to the first line of the script. The error disappeared, but the message was not displayed.
Sorry for the rudimentary question.
views/About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
new Vue({
el: "#about",
data: {
message: "Hello Vue!",
},
});
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
<script>
export default {
data() {
return {
message: 'Hello !'
}
}
}
</script>
Just do like this.
From what I can see, you have already mounted your vue instance in your main.js, so there's no need to create another vue instance and mount it again in the About.vue file.
You only need the following lines of code in the About.vue file
In Vue 2
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: {
message: "Hello World!"
}
}
</script>
In Vue 3
In vue 3, the data property is now a method.
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello World!"
}
}
}
</script>
I got problem with vuejs, please help me
I have main.js:
import App from './App.vue'
import routes from './app.router';
Vue.use(BootstrapVue);
new Vue({
el:'#app',
render: h => h(App),
created(){
},
router: routes,
methods:{
}
})
My file App.vue:
<template>
<div id="app" class="">
<menu-header> </menu-header>
<router-view> </router-view>
</div>
</template>
<script>
import menuHeader from './components/layout/menu-header.vue'; // error when i import this component
components:{
menuHeader
}
</script>
This is my menu-header.vue:
<template>
<ul>
<li>
Hello
</li>
</ul>
</template>
<script>
export default {
name: "menuHeader"
};
</script>
My problem is when i add menu-header component, my page give me error:
Cannot set property 'render' of undefined
But if I don't, it run normally. Please explain why and help me fix it.
Many thanks.
It looks like you are not exporting Vue component definition properly from App.vue file:
<template>
<div id="app" class="">
<menu-header> </menu-header>
<router-view> </router-view>
</div>
</template>
<script>
import MenuHeader from './components/layout/menu-header.vue'; // error when I import this component
// Code is missing export
export default {
components: {
MenuHeader
}
}
</script>
I tried to use a vue component(Global.vue) in other component(App.vue), but there
Failed to mount component: template or render function not defined
error.
Global.vue:
<template>
<div class="global-view">
<p>Global </p>
</div>
</template>
<script>
export default {
name: 'global'
}
</script>
App.vue:
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.component('global', require('./components/Global'))
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
You need to import the component within the component file that you want to use it in.
`import Global from './components/Global'
From there you need to add a new key inside your components option that will "register" the component.
Here is what you want your app component to look like.
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
import Global from './components/Global
export default {
name: 'app'
components: {
'global': Global,
}
}
</script>
<global></global> should be able to render at this point.
I use import instead of require(in main.js) and it works for me:
import Global from './components/Global.vue
Vue.component('global', Global)`
I have the following code in my .vue file:
<template>
<p>hello search</p>
</template>
<script>
import Vue from 'vue';
var vm = new Vue({
el: '#js-quick-search'
})
</script>
and in my .html I have a the element for Vue instance
<div id="js-quick-search"></div>
However, the template part is completely ignored. How can I attach it to the instance without adding it inside the script tag?
Basically I want to achieve the same as this:
<script>
import Vue from 'vue';
var vm = new Vue({
el: '#js-quick-search',
template: '<p>whatever</p>'
})
</script>
but without hard-coding template inside the script.
Your markup inside the script tag is wrong. To create a template, you'd have to export the script, like so:
<template>
<div class="MyTemplate">
Your template
</div>
</template>
<script>
export default {
name: "MyTemplate"
}
</script>
To then use the template, just import it (import MyTemplate from './MyTemplate.vue') and add it to your components (components: { MyTemplate }) then place it in as <myTemplate>)