I am trying to install Apollo on my Vue app.
I have created a fresh Vue install through npm init vue#latest and done a manual install of the Apollo client by following this guide:
https://apollo.vuejs.org/guide/installation.html#vue-cli-plugin
When I run my app I get the following error in the console:
Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=f3a89b0f' does not provide an export named 'default
My main.js file looks like this:
import App from "./App.vue";
import Vue from "vue";
import VueApollo from "vue-apollo";
import { createApp } from "vue";
import ApolloClient from "apollo-boost";
const apolloClient = new ApolloClient({
// You should use an absolute URL here
uri: "https://api.graphcms.com/simple/v1/awesomeTalksClone",
});
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
});
new Vue({
el: "#app",
// inject apolloProvider here like vue-router or vuex
apolloProvider,
render: (h) => h(App),
});
Vue.use(VueApollo);
createApp(App).mount("#app");
I believe that I have followed the instructions as stated, but apparently I am doing something wrong?
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'
]
})
when I create this error appear I'm not sure hot fix it.
I ready build a web app and then I just create a store.
enter image description here
/store/index.js
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
title: "My custom title"
},
mutations: {},
modules: {},
actions: {}
});
main.js
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router/routes";
import Navbar from "./components/Navbar";
Vue.component("Navbar", Navbar);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App)
}).$mount("#app");
Check if your packages versions are compatible with each other. Don't want to be guessing but looks like you have too new Vuex for Vue 2.
Try installing Vuex in version 3.
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");
I using vuetify : https://vuetifyjs.com/en/
I want to use moment.js. So I read this reference : https://www.npmjs.com/package/vue-moment
I had run npm install vue-moment
I'm still confused to put this script Vue.use(require('vue-moment'));
In the vuetify, there exist two file : main.js and index.js
main.js like this :
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
index.js like this :
import Vue from 'vue';
import Vuex from 'vuex';
import dataStore from './modules/data-store';
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug = process.env.VUE_APP_DEBUG !== "production";
export default new Vuex.Store({
modules: {
dataStore
},
strict: debug,
plugins: debug ? [createLogger()] : []
});
where do i put Vue.use(require('vue-moment'));?
I try to put it in the main.js, but if i call my vue component, there exist error : ReferenceError: moment is not defined
My vue component like this :
<template>
...
</template>
<script>
export default {
mounted() {
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
};
</script>
I found this at the bottom of the vue-moment npm page
vue-moment attaches the momentjs instance to your Vue app as
this.$moment.
This allows you to call the static methods momentjs provides.
So you should be able to use your original configuration of vue-moment and do this in your mounted() method
mounted() {
let a = this.$moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
notice this.$moment
And for the set up of vue-moment you should place this in your main.js file
main.js
Vue.use(require('vue-moment'))
=========================================================================
GLOBAL
If you want to use moment with Vue globally you can create an Instance Proprety
main.js
import moment from 'moment'
Vue.prototype.moment = moment
In your component you then call this.moment in your methods or computed properties. In your mounted section it would look like this
mounted() {
let a = this.moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
COMPONENT
If you just want to use moment in a component you can include directly like this
<script>
import moment from 'moment'
export default {
mounted(){
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
}
</script>
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.