The Slider do not show up (is blank).
I install the iview in npm:
npm install iview --save-dev
in the main.js:
import iView from 'iview'
Vue.use(iView)
In my Reommend.vue component:
<template>
<div>
<Test01></Test01>
</div>
</template>
<script>
import Test01 from '../test/test01'
export default{
components: {
Test01,
},
}
</script>
<style scoped>
</style>
in my test/test01.vue:
<template>
<div>
<Slider v-model="value" range></Slider>
123
</div>
</template>
<script>
export default{
data(){
return {
value: [2, 22]
}
}
}
</script>
<style scoped>
</style>
when I npm run dev, there do not shows the Slider, only shows the 123:
If I comment the Vue.use(iView) in main.js, there will report Error:
vue.esm.js?efeb:578 [Vue warn]: Unknown custom element: <Slider> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
So, why the <Slider> template do not show up in my project.
The official document is: https://www.iviewui.com/docs/guide/introduce
Import the CSS:
import 'iview/dist/styles/iview.css';
So your main.js will have:
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
DEMO CODESANDBOX here.
Related
In the example router project generated by Vue CLI, I don't see export statement in App.vue. But App module is found imported in main.ts. How the import of a module is made possible without an export statement?
But I see the export statement in App.vue of a non-router example project.
main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App)
.use(router)
.mount("#app");
App.vue of router example project
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</template>
<style>
...
</style>
App.vue of a non-router example project
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "./components/HelloWorld.vue";
#Options({
components: {
HelloWorld
}
})
export default class App extends Vue {}
</script>
<style>
...
</style>
I created a dashboard.vue component and I imported table.vue component into it but the table.vue doesn't appear in my web page and in the vue.dev tools.
When I import the table.vue in app.vue there's no issue.
Below my files.
Thanks in advance!
//dashboard.vue
<template>
<div>
<table></table>
</div>
</template>
<script>
import table from "./table";
export default {
name: 'Dashboard',
component: {
table,
}
}
</script>
<style >
</style>
//table.vue
<template>
<div>
<p>Test</p>
</div>
</template>
<script>
export default {
name: 'Table',
}
</script>
You cannot name components the same as reserved HTML elements. Change it to my-table.
You'll need to map it:
components: {
'my-table': table,
}
I am new to Nuxt and having issues importing components.
components/Header.vue
<template>
<h1>Header</h1>
</template>
index.vue
<template>
<Header />
</template>
<script>
import Header from '#/components/Header';
export default {
components: {
Header
}
};
</script>
Replace the # with ~ but did not change anything
This is the error I am getting.
#/components/Header in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/buyer/index.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save #/components/Header
So I have a vue component and I am separating each vue component into 2 files. For example;
SomePage.vue:
<template>
<b-container>
<h1>{{ title }}</h1>
<b-row>
<b-col>
{{ content }}
</b-col>
</b-row>
</b-container>
</template>
<style lang="scss" scoped>
</style>
// Make babel comple this now not at run time
<script type="text/javascript" src="./some-page.js"></script>
some-page.js:
export default {
name: 'contact',
data() {
return {
title: 'Contact',
content: 'Foo'
}
}
}
When I run my code I get the following error:
vendor.js:66537 [Vue warn]: Failed to mount component: template or render function not defined.
found in
--->
at src\App.vue
Others have experienced this same error and there is a SO post/solution to this but that posts solution is to either use run and compile mode (which I do not wish to do - we use es6 so not all browsers support this) or to add a empty div to the template, which doesn't solve my problem either.
My project doesn't use run and compile. Just run and I'd like to keep it that way. The problem is that webpack &/or babel is not compiling the template (or maybe the external js).
Is there a way to configure Babel or WebPack or Vue.js to fix this?
Just import through a mixim, example...
SomePage.vue:
<template>
<b-container>
<h1>{{ title }}</h1>
<b-row>
<b-col>
{{ content }}
</b-col>
</b-row>
</b-container>
</template>
<style lang="scss" scoped>
</style>
<script>
import { contact } from '../some-page'
export default {
mixins : [
contact
],
}
</script>
some-page.js:
export const contact = {
data() {
return {
title: 'Contact',
content: 'Foo'
}
}
}
i have been googling around for quite some time now to figure out WHY.. my modal component won't get recognized inside my vieworder.vue component.
I'm receiving :
ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?
type=script&index=0!./src/components/ViewOrder.vue
Module not found: Error: Can't resolve './components/Modal.vue' in
'C:\xxxxxx\xxxxxxxxx\src\components'
ViewOrder.vue - usage of modal :
<template>
<div class="col-sm-10 col-sm-offset-1" v-if="order">
<modal v-if="showModal" #close="showModal = false">
</modal>
</div>
</template>
<script>
import * as types from '../store/mutationtypes'
import { mapGetters, mapActions } from 'vuex'
import Modal from './components/Modal.vue'
export default {
name: 'ViewOrder',
components: {
'modal': Modal
}
....
Modal.vue
<template>
....
</template>
<script>
export default {
name: "modal"
}
</script>
Main.js - Reference :
....
import Modal from './components/Modal.vue'
import ViewOrder from './components/ViewOrder.vue'
....
import Modal from './components/Modal.vue'
Should be import Modal from './Modal.vue'
You're already in the components folder when inside ViewOrder.vue