I've created project with Vue CLI. Every time i save *.vue file i hear sound of Windows message, but i see changes in browser. There is no error. This sound is annoying! Can I remove it?
[UPDATE]
Here is my code:
App.vue
<template>
<div id="app">
<p v-html="msg"></p>
</div>
</template>
<script>
export default {
data(){
return {
msg: "Some message."
}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
Related
I have create a test vue project using recurring components with single file components. I am getting an error that the component cmp2 is undefined even though it is defined in the file. Any help is welcome.
Here are the files:
-- main.js --
import Vue from 'vue'
import App from './App.vue'
new Vue({
name: 'main',
render: h => h(App)
}).$mount('#app')
-- App.vue --
<template>
<div id="app">
app
<cmp1 :show="true"/>
</div>
</template>
<script>
import cmp1 from './cmp1.vue'
export default {
name: 'app',
components: { cmp1 }
}
</script>
-- cmp1.vue --
<template>
<div>
in cmp1
<cmp2 v-if="show"/>
</div>
</template>
<script>
import cmp2 from './cmp2.vue'
export default {
name: 'cmp1',
props: ['show'],
components: {
cmp2
}
}
</script>
-- cmp2 --
<template>
<div>
in cmp2
<cmp1 />
</div>
</template>
<script>
import cmp1 from './cmp1.vue'
export default {
name: 'cmp2',
components: { cmp1 }
}
</script>
Now if I register the components in the main file, then everything works correctly:
-- main.js with registration --
import Vue from 'vue'
import App from './App.vue'
import cmp1 from './cmp1.vue'
import cmp2 from './cmp2.vue'
Vue.component('cmp1', cmp1)
Vue.component('cmp2', cmp2)
new Vue({
name: 'main',
render: h => h(App)
}).$mount('#app')
But I still don't understand why it would not work when I don't register the components globally. This has something to do with the recursive nature of the components but I don't know what I am doing wrong.
Thanks for the help !
That code is not correct ...
because you call a component in another component and that component call the first component you call and it cause the infinite loop to your app and there is no break point for that and vue stop that for happening because of that your code is not work properly...
I am beginner vue. I use vue cli. Here is my code.
App.vue:
<template>
<div id="App">
<Count/>
</div>
</template>
<script>
import Count from './components/Count';
export default {
name:'App',
components:{
Count
}
};
</script>
Count.vue:
<template>
<div id="App">
<button #click="increase">{{count}}</button>
</div>
</template>
<script>
import {store} from './store/store.js';
export default {
name:'App',
computed:{
count(){
return store.state.count;
}
},
methods:{
increase(){
store.state.count++;
}
}
};
</script>
main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
When I run serve, It compiled fail, say Module not found: Error: Can't resolve './store/store.js'.
I need someone to help me.
sorry. I find the error,It was due to my carelessness.I import component with error path.
I made my first vue.js app and trying to run it on one of the internal pages of a site. However, it renders only on index.html
(upd: the component should display a table with some data from mongoDB)
What I'm trying to add to html pages:
<div id="app"></div>
main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue:
<template>
<div id="app">
<UserComponent />
</div>
</template>
<script>
import UserComponent from './components/UserComponent.vue'
export default {
name: 'app',
components: {
UserComponent
}
}
</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)`
Am using vuetify to build a template but am getting an error
unknown custom element dashboard did you register the component correctly?
This is my code:
In the main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
Vue.use(Vuetify)
new Vue({
el: '#app',
render: h => h(App)
})
In my App.vue
<template>
<dashboard></dashboard>
</template>
<script>
import Dashbaord from './components/dashboard/Dashboard.vue';
export default {
name: "appinit",
components: {
"dashboard":Dashboard
}
}
And here is my dashboard
<template>
<v-app>
<left-drawer></left-drawer>
<toolbar></toolbar> <!-- Dashboard Toolbar-->
<main>
<v-container fluid>
..info are
</v-slide-y-transition>
</v-container>
</main>
<right-drawer></right-drawer>
<footer-area></footer-area>
</v-app>
</template>
<script>
imports ......
export default {
components: {
Toolbar, RightDrawer,LeftDrawer,FooterArea
}
}
What could be wrong as i have just separated the initial vuefy installation component into different component sections
The code is available at github on This link
What could be wrong?
You have few issues in your code.
You have to close tag in App.vue
Fix typo App.vue line 6 "Dashboard"
Remove footer-area from Dashboard.Vue (you don't have that component, yet ;) )