Using Vue-cli plugin I've created small SPA application with Vuetify component framework. When I was running in dev mode everything was fine but in production mode there was problem with components 'installComponents' has already been declared
Then I've found out that this was connected with Tree shaking option that only worksi with webpack 4 in production mode. Or to be more precise including components that you need, instead of getting all of them.
So, instead of registering every single component I tried to use vuetify-loader to automatize "a la carte components" but I it seems that I'm missing something.
my plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
Vue.use(Vuetify)
And my vue.config.js is like this
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
configureWebpack: {
plugins: [
new VuetifyLoaderPlugin()
]
}
}
And main.js is like this:
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store/store'
import axios from 'axios';
Vue.config.productionTip = false
//adding main path to baseurl
axios.defaults.baseURL = "";
// Global settings for Axios
Vue.prototype.$http = axios;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
And I'm still getting this error
Module parse failed: Identifier 'installComponents' has already been declared (35:7)
It's worth mentioning that my babel.config.js looks like this:
module.exports = {
presets: [
'#vue/app'
]
}
I'm using vue 2.5.21 and vuetify 1.3.0
UPDATE
I changed my vue.config.js with this lines
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/hr-map/'
: '/vue-map/',
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// modify the options...
return options
})
}
}
But now in production I'm getting rather strange error for my components
Uncaught TypeError: T(...)(...) is not a function
at Module.56d7 (VectorFeatures.vue:37)
at r (bootstrap:78)
at Object.0 (bootstrap:151)
at r (bootstrap:78)
at i (bootstrap:45)
at bootstrap:151
at bootstrap:151
I must say that when I'm in dev environment everything works fine.
Related
Disclaimer: This project does NOT have Typescript, and migrating to it would be a huge task. Although if there are no better solutions, then I wouldn't mind if somebody answered how to solve the problem with Typescript without having to adapt the whole project to it.
The project is built using Vite
I have a plugin #/plugins/ckie.js:
export default {
install: (app, options) => {
const ckie = {
test: () => { // The test method
console.log('The ckie plugin is working!')
},
}
app.provide('ckie', ckie)
},
}
My main.js:
import { createApp } from 'vue'
import App from './App.vue'
import ckie from './plugins/ckie'
createApp(App)
.use(ckie)
.mount('#app')
And when I use it in a component:
<script setup>
import { inject } from 'vue'
const ckie = inject('ckie') // Here VSCode didn't know what plugins (strings) can be injected
const test = ckie.test // Here Intellisense didn't show any hints for the test method
</script>
Yes, I tried restarting the Vue server, reloading the VSCode window.
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'
]
})
Configuring setup.js inside jest.config.js doesn't solve the error
setup.js
import Vue from "vue";
import Vuetify from "vuetify";
Vue.config.productionTip = false;
Vue.use(Vuetify);
jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest",
setupFiles: ["./tests/unit/setup.js"],
};
Error Occuring:
[Vue warn]: Unknown custom element: <v-app-bar> - did you register the component correctly? For recursive components, make sure to provide the "name" option
[Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option
[Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option
Setup testing for Vuetify
For vuetify, you will need some changes to make sure everything will work fine.
First of all, create a setup.js file under the project’s tests folder with the following lines:
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Vue.config.productionTip = false;
After that open package.json file and replace
From
"test:unit": "vue-cli-service test:unit"
To
"test:unit": "vue-cli-service test:unit --setupTestFrameworkScriptFile=./tests/setup.js"
Let’s write a simple test
import { mount } from "#vue/test-utils";
import Vuetify from "vuetify";
describe("example.vue", () => {
const vuetify = new Vuetify();
test("False Test", () => {
const wrapper = mount(Login, {
stubs: ["router-link", "router-view"],
vuetify,
});
const h1 = wrapper.find("h1");
expect(h1.html()).toBe("<div><p>Foo</p></div>");
});
test("True Test", () => {
const wrapper = mount(Login, {
stubs: ["router-link", "router-view"],
vuetify,
});
const h1 = wrapper.find("h1");
expect(h1.html()).toBe("<h1>Login</h1>");
});
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>
Problem is by building my project in production mode.
I try to import component in my main.js with construction
const isBrowser = typeof window !== 'undefined';
const VueHead = isBrowser ? require('vue-head') : undefined;
In next line i use this component with
Vue.use(VueHead)
and become an error:
Uncaught TypeError: Cannot read property 'install' of undefined.
I can't change construction with "require" on simple import. This option doesn't suit me (cause in this case i become an error with webpack "ReferenceError: window is not defined" and with construction with "require" i try to resolve this error).
full main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import VeeValidate from 'vee-validate'
const isBrowser = typeof window !== 'undefined';
const VueHead = isBrowser ? require('vue-head') : undefined;
Vue.use(VueHead)
Vue.use(VeeValidate)
Vue.config.productionTip = false
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
UPDATE: I try to start my application with pm2 in production mode. When i start with npm run dev, haven't problems or errors