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')
Related
I'm trying to add text-alignment plugin to my ckeditor build in vue js.
Following is my code for the same::
<template>
<div>
<nav-bar />
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" class="full-width"></ckeditor>
</div>
<router-view class="fixed-center"></router-view>
</div>
</template>
<script>
import NavBar from "components/NavBar.vue";
import ClassicEditor from "#ckeditor/ckeditor5-build-classic"
import Alignment from "#ckeditor/ckeditor5-alignment"
export default {
components: { NavBar },
name: "app",
data() {
return {
editor:ClassicEditor,
editorData:'<p>Content of the editor.</p>',
editorConfig:{
plugins:[Alignment],
toolbar:['Heading','bold', 'italic','alignment']
}
};
},
methods: {},
};
</script>
I'm getting following error ::
CKEditorError: ckeditor-duplicated-modules
[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 was given this problematic codebase, where the Vue components aren't loading in.
Vue is mounting, but without any components.
This is a Laravel 5.7 app, using blade templates with some Vue added in.
This is the initial code:
import 'babel-polyfill'
import loadClientScripts from './load-client-scripts'
import 'bootstrap-material-design/js/'
// Vue & axios
import Vue from 'vue'
import { axios } from '../axios-config'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
import { createLocales } from '../vue-i18n-config'
import Noty from 'noty'
//Components
import signInForm from './components/SignInForm'
import signUpForm from './components/SignUpForm'
import forgotPassForm from './components/ForgotPassForm'
// import RegisterToAgency from './components/RegisterToAgency'
import SendEmailForm from './components/SendEmailForm'
import AgencyServiceCategories from './components/AgencyServiceCategories'
import DropdownWithCheckboxes from './components/DropdownWithCheckboxes'
import LasiCoalitionAgencies from './components/LasiCoalitionAgencies'
import ServiceProviders from "./components/ServiceProviders";
import ServiceProvider from "./components/ServiceProvider";
import vSelect from "vue-select";
window.axios = axios
Vue.component('v-select', vSelect)
// Bootstrap Vue
Vue.use(BootstrapVue)
export function createApp() {
const i18n = createLocales(window.locale)
// Components
Vue.component('sign-in-form', signInForm)
Vue.component('sign-up-form', signUpForm)
Vue.component('forgot-pass-form', forgotPassForm)
// Vue.component('register-to-agency', RegisterToAgency)
Vue.component('send-email-form', SendEmailForm)
Vue.component('agency-service-categories', AgencyServiceCategories)
Vue.component('dropdown-with-checkboxes', DropdownWithCheckboxes)
Vue.component('lasi-coalition-agencies', LasiCoalitionAgencies)
Vue.component('service-providers', ServiceProviders)
Vue.component('service-provider', ServiceProvider)
new Vue({
i18n
}).$mount('#app')
}
sign in form component for example:
<template>
<div>
<b-form
id="sign-in-form"
#submit="onSubmit"
>
<div class="form-group">
<b-form-input
id="sgi-email"
v-model="model.email"
required
name="email"
:state="state('email')"
type="email"
:placeholder="$t('validation.attributes.email_address')"
/>
<b-form-feedback>{{ feedback('email') }}</b-form-feedback>
</div>
<div class="form-group mb-3">
<b-form-input
id="sgi-password"
v-model="model.password"
required="required"
name="password"
:state="state('password')"
type="password"
:placeholder="$t('validation.attributes.password')"
/>
<b-form-feedback>{{ feedback('password') }}</b-form-feedback>
</div>
<div class="form-group my-0">
<a
class="text-opacity forgot-pass-link"
href="#"
>
{{ $t('labels.user.password_forgot') }}
</a>
</div>
</b-form>
</div>
</template>
<script>
console.log('IM HIT')
export default {
name: 'SignInForm',
data() {
return {
model: {
email: '',
password: ''
},
validation: {}
}
},
mounted() {
this.test()
},
methods: {
test() {
console.log("test")
},
feedback(name) {
if (this.state(name)) {
return this.validation.errors[name][0]
}
},
state(name) {
return this.validation.errors !== undefined &&
this.validation.errors.hasOwnProperty(name)
? 'invalid'
: null
},
onSubmit(evt) {
evt.preventDefault()
window.axios
.post('/login', this.model)
.then(response => {
location.href = '/app'
})
.catch(e => {
if (e.response.status === 422) {
this.validation = e.response.data
return
}
})
}
}
}
</script>
Any ideas help!
in the example sign in form, the console does output the "Im hit" that I had placed to ensure that things were loaded.
Thanks
Are you at any point rendering anything with that Vue instance?
Try passing a component to its render function like so:
// lets pretend you've imported a component from some file App.vue up here and called the component simply 'App'
// e.g.: const App = require('./App.vue') or import App from './App.vue';
Vue.use(BootstrapVue)
export function createApp() {
const i18n = createLocales(window.locale)
// Components
Vue.component('sign-in-form', signInForm)
Vue.component('sign-up-form', signUpForm)
Vue.component('forgot-pass-form', forgotPassForm)
// Vue.component('register-to-agency', RegisterToAgency)
Vue.component('send-email-form', SendEmailForm)
Vue.component('agency-service-categories', AgencyServiceCategories)
Vue.component('dropdown-with-checkboxes', DropdownWithCheckboxes)
Vue.component('lasi-coalition-agencies', LasiCoalitionAgencies)
Vue.component('service-providers', ServiceProviders)
Vue.component('service-provider', ServiceProvider)
new Vue({
i18n,
render: createElement => createElement(App) // needs a render function
}).$mount('#app')
}
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
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>