It could be a simple mistake. But I'm a newbie in this area. I get a Syntax Error on Unexpected Token here:
component: () => import('#/layouts/default.vue'),
What would be the issue?
If you want to import a component into another module/component then use this at the top of your file:
import MyComponent from '#/layouts/default.vue'
...assuming you have exported MyComponent as the default export in your default.vue file.
You can change MyComponent to whatever you want.
I'm assuming you're using stand alone components. In that case, include export default in your default.vue file and then import DefaultComponent from '#/layouts/default.vue at the top of the file. Then, include the DefaultComponent in the Components section.
Default.vue
<template>
<p>{{hi}}</p>
</template>
<script>
export default{
data: function(){
hi: 'Hello World'
}
}
</script>
<style
</style>
Main.vue
<template>
<default-component></default-component>
</template>
<script>
import DefaultComponent from '#layouts/default.vue';
export default{
components: {
'default-component': DefaultComponent
}
}
</script>
<style
</style>
Related
My component doesn't render and I get the above warning in the console. This is my first Vue project, so I am struggling to understand where the issue lies.
This is my App.vue:
<template>
<Header />
</template>
<script>
import Header from "./components/Header";
export default {
setup() {
return {
Header,
};
},
};
</script>
And this is the Header component, I am trying to render, Header.vue:
<template>
<header>
<h1>Income Tracker</h1>
<div class="total-income">€0</div>
</header>
</template>
<script>
export default {};
</script>
Any idea where I am going wrong?
Like in Vue 2:
<script>
import Header from "./components/Header";
export default {
components {
Header
},
};
</script>
Say I have a basic vue project
main.js:
import { createApp } from 'vue';
import App from './App.vue';
import SomeComponent from './components/SomeComponent.vue';
const app = createApp(App);
app.component('some-component', SomeComponent);
app.mount('#app');
components/App.vue:
<template>
<some-component></some-component>
</template>
<script>
import SomeComponent from "./SomeComponent.vue";
export default {
components: { SomeComponent },
};
</script>
components/SomeComponent.vue:
<template>
<div></div>
</template>
<script>
export default {};
</script>
Note that in main.js, I call app.component('some-component', SomeComponent); and in SomeComponent.vue I also specify the same with components: { SomeComponent },. Only one of the two ways is needed (though specifying both doesn't seem to cause errors).
My question is this: When would you specify components in main.js instead of in the component that will actually use it?
It seems that I could create an entire storefront and list all of the components in main.js without ever using components: {} inside a single one of my components and it would work. But it seems more logical to me to list the used sub-components inside each component that will use them for the encapsulation and reusability it brings. But that's because I have an object oriented mindset.
I have to try to attempt but the solution is still the same, do I have miss any steps?
<template>
<div>
<component v-bind:is="components"></component>
</div>
</template>
<script>
import invbo from './components/inventory.vue';
import itemsrbo from './components/itemsearch.vue';
import mainbo from './components/mainbo.vue';
export default {
components:{
'inventory':invbo,
'item-search':itemsrbo,
'mainbo':mainbo,
},
data(){
return{
components: 'mainbo'
}
}
}
</script>
Error message
./src/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--0-1!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './components/inventory.vue' in 'C:\Users\...\src\views'
And here the sample code on what I am trying to do to load the vue components from the components directory.
Post the inventory component?
At inventory.vue
You should export the component as:
export default {}
So you need to use the correct relative path, then: import invbo from '../components/inventory.vue answer by #MartinBean
I'm trying to create a custom component for some repetitive html. But the component won't show and I get this error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Child>
<VApp>
<App> at src/App.vue
<Root>
My main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
Vue.component('child', {
props: ['text'],
template: `<div>{{ text }}<div>`
});
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
My App.vue:
<template>
<v-app>
<child :text="message"></child>
<Navbar/>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
</v-app>
</template>
<script>
import styles from './app.css'
import Navbar from '#/components/Navbar'
import Footer from '#/components/Footer'
export default {
name: 'App',
components: { Navbar, Footer },
computed: {
theme(){
return (this.$vuetify.theme.dark) ? 'dark' : 'light'
},
},
data: () => ({
//
}),
};
</script>
What is going on? How to define a custom component?
My question "has mostly code"; so, my thoughts on vue.js: I notice that there are quite a few different ways or styles to build vue.js applications. I wish their examples would give more context on where to put the example code, I'm a seasoned developer, but new to web dev and js, and find that a lack of examples on the vue.js site really makes it hard to learn this framework.
Try this:
1- create a component in a separate .vue file
2- register it globally in main.js
3- then call it in any component directly.
1.
<template><div>{{ text }}<div></template>
<script>
export default{
props:['text']
},
</script>
2. in main.js
//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...
3 Now you can call it in any component because it is registered globally.
<template>
<div>
<child-component text='some text to pass as prop.'/>
//...
</div>
</template>
//...
I tried to use the plugin for a project with Vue 2 but got a Vue warn like below.
[Vue warn]: Failed to mount component: template or render function not
defined
Inside vue component:
import ToggleButton from 'vue-js-toggle-button'
export default {
components: { ToggleButton }
}
Then,
<toggle-button :value="true" :labels="{checked: 'Foo', unchecked: 'Bar'}"/>
The plugin is not that popular and any help would be much appreciated.
You don't export the toggle button into another component. You import it in whatever component you want to use it and tell Vue to use it with Vue.use(ToggleButton). Then you can use it inside your component's template and export that whole component afterwards!
Example would be:
<template>
<toggle-button #someOfYourValues#></toggle-button>
</template>
In here, you don't import anything of the ToggleButton! You just use it as a tag inside your components!
Let's move on to your main js file where all the Vue instance creation takes place. Usually, it looks similar to this:
<script>
import Vue from 'vue'
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
new Vue({
el: #yourDivInTheBaseHTMLFile
# some other stuff for your vue instance
})
</script>
I tested it inside my own current Vue project, which is a todo list with lots of components. It literally works inside every single one of them when you do a Vue.use().
If needed, I can link you to the project so you can have a look, but this simple explanation should do it ;)
For completeness (Vue SFC Class):
src/main.ts:
import Vue from 'vue';
import ToggleButton from 'vue-js-toggle-button';
Vue.use(ToggleButton);
new Vue({
...
render: h => h(App)
}).$mount('#app');
src/components/MyComponent.vue:
<template>
<toggle-button />
</template>
<script lang="ts">
import { ... } from "vue-property-decorator";
// do NOT import the component in here
#Component({
components: {
// do NOT declare the component in here
}
})
export default class MyComponent extends Vue {
}
</script>
<style scoped lang="scss">
</style>