I have 1 component called calculator.vue and in my main.js I have the code for the plugin, like below:
import App from './App.vue'
import vuetify from './plugins/vuetify'
import "./plugins/vuetify-money.js"
import VueMeta from 'vue-meta'
import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, {
id: 'My UA',
disableScriptLoader: true
})
Vue.use(VueMeta);
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')```
As told here: https://github.com/MatteoGabriele/vue-analytics
his plugin will stop receiving feature requests. I will only spend time for important bug fixes. Google moved from analytics.js to its new gtag.js library and I've created a new plugin called vue-gtag. I suggest you to start using that one if you are about to create a new project.
You can see an example here: https://matteo-gabriele.gitbook.io/vue-gtag/#add-plugin-to-your-application
import Vue from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";
Vue.use(VueGtag, {
config: { id: "UA-1234567-1" }
});
new Vue({
render: h => h(App)
}).$mount("#app");
Related
I have a Vue2 application that is utilizing Vuetify.
I've noticed that, when using the material design icons, the application is reaching out to a CDN to retrieve those icons which causes render blocking issues.
I've followed the documentation here to install locally, but I can still see the CDN being accessed in the network tab of my browser inspector.
I used the vue cli to generate the app so I am unfamiliar with using webpack to reference css-loader. My config is listed below:
// /src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import store from './store'
Vue.config.productionTip = false
new Vue({
vuetify,
store,
render: h => h(App)
}).$mount('#app')
// /src/plugins/vuetify.js
import '#mdi/font/css/materialdesignicons.min.css'
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
});
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
]
})
I'm using vuetify, and I need to add font awesome library, but I don't know how to do it, it looks like the vuetify documentation is not updated, the guide for add font awesome says I should add the next in main.js:
Vue.use(Vuetify, {
iconfont: 'fa4'
})
or something similar,my problem is that I'm using another method for run the app, my main.ts is the next:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'font-awesome/css/font-awesome.min.css' // Ensure you are using css-loader
require('#/SCSS/main.scss')
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
If I add the "Iconfont" to my New Vue({}),it doesn't work.
how can I add font awesome to vuetify in this case?
You need to use vue-fontawesome.
First install fontawesome vue-fontawesome, core and icons:
$ npm i #fortawesome/vue-fontawesome
$ npm i #fortawesome/fontawesome-svg-core
$ npm i #fortawesome/free-solid-svg-icons
Then in src/main.js
import Vue from 'vue'
import App from './App'
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)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Now that it is done you will be able to use the icons using the next tag:
<font-awesome-icon icon="user-secret" />
All you have to do is replace the value in the icon attribute:
icon="Replace this text"
EDIT 1: Here you have a working example in codesandbox:
EDIT 2:
I will add a screenshot because CodeSanbox sometimes takes a lot of time to load, this is just to prove that if you wait you can actually see the icon.
Using the latest version of Vue
I've been trying to make Vuelidate work
Every guide I see on the internet using this type of "Main.js" code:
import Vue from 'vue';
import Vuelidate from 'vuelidate';
import App from './app/App';
Vue.use(Vuelidate);
new Vue({
el: '#app',
render: h => h(App)
});
While my main.js looks like this:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Trying to use in my component as followed:
import { required, email } from '#vuelidate/validators'
import {useVuelidate} from "#vuelidate/core";
export default {
data: () => ({
v$: useVuelidate(),
Trying to implement it like this:
<div v-if="submitted && !$v.validations.affiliate.required"></div>
Getting this error:
unable to resolve type of v$
import { createApp } from 'vue'
import App from './App.vue'
import Vuelidate from 'vuelidate'
createApp(App).use(Vuelidate).mount('#app')
The documentation says like this:
<script type="text/javascript" src="assets/js/vue-shopify-products.js"></script>
And then before you initialize vue, you do this:
Vue.use(ShopifyProducts);
What do you do if you use vue-cli webpack template?
My main.js file looks like this
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import * as d3 from 'd3'
import * as shopifyProducts from 'vue-shopify-products'
Vue.config.productionTip = false
Vue.use(shopifyProducts)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
created: function () {
d3.csv('/static/data/csv-files/bicycles.csv', (data) => {
let products = this.$formatProducts(data)
console.log(products)
})
}
})
This doesn't work as I get the error 'Uncaught (in promise) TypeError: _this.$formatProducts is not a function'. What is the correct way to include Vue-Shopify-Products and reference the $formatProducts function?
Since it is an npm package installed as a dependency, you should import it this way,
import defaultExport from "module-name";
so this should work:
import ShopifyProducts from "vue-shopify-products";
Vue.use(ShopifyProducts);
After that you can get rid of the script reference of the module.
Edit 1:
I don't think is going to work since the module you are trying to use as a Vue plugin do not follow the conventions especified on the Vue documentation.
Version
2.5.2
Reproduction link
http://test.airspace.cn/
Steps to reproduce
1.Clear the browser cache
2.Enter url and dev-tool see if there is a blank page phenomenon. lt's because the main.js doesn't request.
3.Refresh the browser, lt's normal.
4.Open a new browser tab and enter the url, blank page will appear occasionally.
What is expected?
can reach the site everytime
What is actually happening?
blank page
open a new tab and enter a url
refresh again and again
this is main.js
import Vue from 'vue'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '#/config/base'
import * as allFilters from '#/config/filter'
import { category } from '#/config/constant'
import App from '#/App'
import router from '#/router'
import store from '#/store/index'
import '#/directive'
Vue.config.productionTip = false
// Vue.use(Button)
Vue.use(Vuex)
Vue.use(ElementUI, { size: 'small' })
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
Object.keys(allFilters).forEach((key) => {
Vue.filter(key, allFilters[key])
})
store.dispatch('dispatchPlaneTypes')
store.dispatch('dispatchPlaneBrands')
process.env.NODE_ENV === 'development' ? console.log(category) : '' //eslint-disable-line