I'm trying to use the color picker from element-ui (http://element.eleme.io/#/en-US/component/color-picker). However it doesn't show up... Any clues about whats wrong?
<template>
<div class="color">
<span class="demonstration">Color picker</span>
<el-color-picker v-model="color"></el-color-picker>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
Vue.use(ColorPicker)
export default {
name: 'color',
data () {
return {
color: '#20a0ff'
}
}
}
</script>
Import the default-theme css too:
<template>
<div class="color">
<span class="demonstration">Color picker</span>
<el-color-picker v-model="color"></el-color-picker>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ColorPicker)
export default {
name: 'color',
data () {
return {
color: '#20a0ff'
}
}
}
</script>
Reference: http://element.eleme.io/#/en-US/component/quickstart#import-element
Related
[1]Can not import?
I wanna link a js file with Vue imported on it to a html.
Is seems the html is linking correctly the script.js under the script tag but the javascript file cant understand Vue so the html cant do so.
Im very inexperienced, it is basic help.
import Vue in index.html
<head>
<script type="importmap">
{
"imports": {
"vue": "/lib/vue.esm.browser.js_2.6.11/vue.esm-browser.js",
"vue-multiselect":"/lib/vue-multiselect/vue-multiselect.esm.min.js",
"SingleFileComponent":"/js/SingleFileComponent.js",
"MultiSelectComponent":"/js/MultiSelectComponent.js"
}
}
</script>
</head>
create anchor in index.html
<div id="app">
<multi-select-component></multi-select-component>
</div>
<div id="single">
<single-file-component></single-file-component>
</div>
<script type="module">
import { createApp } from 'vue'
import VueMultiselect from 'vue-multiselect'
import SingleFileComponent from "SingleFileComponent";
import MultiSelectComponent from "MultiSelectComponent"
createApp({
components: {
MultiSelectComponent
}
})
.component('multiselect', VueMultiselect)
.mount('#app')
createApp({
components: {
SingleFileComponent
}
})
.mount('#single')
</script>
create single-file-component in SingleFileComponent.js
export default {
template: `
<div>
<h1>Single-file JavaScript Component</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: 'Oh hai from the component'
}
},
}
create multi-select-component in MultiSelectComponent.js
export default {
template: `
<multiselect v-model="value" :options="options"></multiselect>
<label>{{ value }}</label>`,
data() {
return {
value: null, options: ['list', 'of', 'options']
}
}
}
I'm trying to use MainNavbarButton within MainNavbar. I imported the component, but get the error of "Module not found: Error: Can't resolve './components/MainNavbarButton.vue'" All the solutions I found seem to stem from a spelling mistake, but I'm pretty sure that's not the case here.
MainNavbar.vue
<template>
<div id="navbar">
<MainNavbarButton />
</div>
</template>
<script>
import MainNavbarButton from './components/MainNavbarButton.vue'
export default {
name: 'MainNavbar',
components: {
MainNavbarButton
}
}
</script>
MainNavbarButton.vue
<template>
<h2>{{ title }}</h2>
</template>
<script>
export default {
name: 'MainNavbarButton',
props: {
title
}
};
</script>
App.vue
<template>
<MainNavbar/>
</template>
<script>
import MainNavbar from './components/MainNavbar.vue'
export default {
name: 'App',
components: {
MainNavbar
}
}
</script>
i installed font-awesome into my Vue project exactly like in Docs but i got that error
first i installed it using these commands
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/vue-fontawesome#prerelease
in main.js :
import Vue from 'vue'
import App from './App.vue'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Navbar.vue:
<div class="nav-icons">
<font-awesome-icon icon="user-secret" />
</div>
Using Vue 2 and the CLI, I recently built a Font Awesome test project that works.
IconList.vue
<template>
<div class="icon-list">
<h3>Icon List</h3>
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li v-for="(iconName, index) in currentIcons" :key="index" class="list-group-item" >
<font-awesome-icon :icon="iconName" class="fa-2x" />
</li>
</ul>
<button v-if="displayMoreBtn" class="btn btn-secondary" #click="showMore" >
<font-awesome-icon icon="ellipsis-h" class="fa-2x" />
</button>
</div>
</div>
</div>
</template>
<script>
import { library } from "#fortawesome/fontawesome-svg-core";
import { faCoffee } from "#fortawesome/free-solid-svg-icons";
import { faCloudMoonRain } from "#fortawesome/free-solid-svg-icons";
import { faEnvelope } from "#fortawesome/free-solid-svg-icons";
import { faFan } from "#fortawesome/free-solid-svg-icons";
import { faEllipsisH } from "#fortawesome/free-solid-svg-icons";
import { faGuitar } from "#fortawesome/free-solid-svg-icons";
import { faPeace } from "#fortawesome/free-solid-svg-icons";
import { faRobot } from "#fortawesome/free-solid-svg-icons";
library.add(faCoffee);
library.add(faCloudMoonRain);
library.add(faEnvelope);
library.add(faFan);
library.add(faEllipsisH);
library.add(faGuitar);
library.add(faPeace);
library.add(faRobot);
export default {
data() {
return {
initialIcons: ["coffee", "cloud-moon-rain", "envelope", "fan"],
additionalIcons: ["guitar", "peace", "robot"],
displayMoreBtn: true,
currentIcons: [],
};
},
methods: {
showMore() {
this.currentIcons = this.currentIcons.concat(this.additionalIcons);
this.displayMoreBtn = false;
},
},
created() {
this.currentIcons = this.initialIcons;
},
};
</script>
App.vue
<template>
<div id="app" class="container">
<icon-list />
</div>
</template>
<script>
import IconList from '#/components/stackoverflow/font-awesome-list/IconList'
export default {
name: 'App',
components: {
IconList
},
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
// Font Awesome
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
I am experimenting with electron-vue seed app and have upgraded electron to 8 and vue to the latest versions. I am installing vue-material components in my src/renderer/router/index.js:
import Vue from 'vue'
import Router from 'vue-router'
import { MdButton, MdContent, MdTabs, MdAutocomplete } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'
Vue.use(Router)
Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)
Vue.use(MdAutocomplete)
I then have src/renderer/App.vue with
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'pdq-app'
}
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght#400;600&display=swap|Roboto:400,500,700,400italic|Material+Icons');
html {
font-family: 'Source Code Pro', monospace;
}
</style>
I'm drawing the autocomplete on the CommandLine.vue template, with the Command.vue component:
<template>
<main>
<main-menu></main-menu>
<command></command>
</main>
</template>
<script>
import MainMenu from './MainMenu'
import Command from './CommandLine/Command'
export default {
name: 'command-line',
components: { MainMenu, Command },
methods: {
open (link) {
this.$electron.shell.openExternal(link)
}
}
}
</script>
<style>
</style>
The autocomplete component is thus:
<template>
<div>
<md-autocomplete v-model="selectedCountry" :md-options="countries">
<label>Country</label>
</md-autocomplete>
<md-autocomplete v-model="selectedEmployee" :md-options="employees" md-dense>
<label>Employees</label>
</md-autocomplete>
</div>
</template>
<script>
export default {
name: 'AutocompleteStatic',
data: () => ({
selectedCountry: null,
selectedEmployee: null,
countries: [
'Algeria',
'Argentina',
'Brazil',
'Canada',
'Italy',
'Japan',
'United Kingdom',
'United States'
],
employees: [
'Jim Halpert',
'Dwight Schrute',
'Michael Scott',
'Pam Beesly',
'Angela Martin',
'Kelly Kapoor',
'Ryan Howard',
'Kevin Malone',
'Creed Bratton',
'Oscar Nunez',
'Toby Flenderson',
'Stanley Hudson',
'Meredith Palmer',
'Phyllis Lapin-Vance'
]
})
}
</script>
The issue is I am not sure what I am missing to display the input control - it's rendering invisible. There exists an md-input tag in the rendered HTML, but it seems I'm missing some dependency to draw stuff:
What am I missing to draw the full autocomplete?
Looks like I needed to add some dependencies: MdField, MdMenu, and MdList. It's difficult to see this in the documentation; I guess if I was importing the entirety of VueMaterial it wouldn't be an issue.
import Vue from 'vue'
import Router from 'vue-router'
import {
MdButton,
MdCard,
MdContent,
MdTabs,
MdAutocomplete,
MdField,
MdMenu,
MdList
} from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'
Vue.use(Router)
Vue.use(MdAutocomplete)
Vue.use(MdField)
Vue.use(MdMenu)
Vue.use(MdList)
Vue.use(MdButton)
Vue.use(MdCard)
Vue.use(MdContent)
Vue.use(MdTabs)
// export default new Router({
// ...
I want to use the vue-material package in my app. I've everything as the docs suggest but my components are not being rendered properly. I am using VueJs 2.x.x
Here is my main.js file:
import Vue from 'vue'
import App from './App.vue'
import state from './state.js'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.use(VueMaterial)
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
})
new Vue({
el: '#app-container',
components: {
App
}
})
And here is App.vue:
<template>
<div id="app">
<div>Current page: {{currentView}}</div>
<img src="./assets/logo.png">
<transition name="fade" mode="out-in">
<component #stateCPchanged="changeView" v-bind:is="currentView"> </component>
</transition>
</div>
</template>
<script>
import numberPage from './components/NumberPage.vue'
import redirectPage from './components/RedirectPage.vue'
import state from './state.js'
export default {
data () {
return {
currentView: state.currentPage
}
},
components: {
numberPage: numberPage,
redirectPage: redirectPage
},
methods: {
changeView() {
this.currentView = state.currentPage
}
}
}
</script>
<style>
...
</style>
And the page using the plugin:
<template>
<div v-md-theme="'default'"
<md-button class="md-raised">Default</md-button>
</div>
</template>
<script>
import state from '../state.js'
export default {
data(){
return{
message: "this.clientId"
}
},
methods:{
goOtp(){
},
goRedirect(){
state.currentPage = 'redirectPage'
}
}
}
</script>
<style>
....
</style>