Hello, I’m new using Ionic Vue.
In Vue projects, I use packages like vue-moment, and I import it to my app.js like this:
const moment = require('moment')
import VueMoment from 'vue-moment'
Vue.use(VueMoment, {
moment
});
How can I use this in Ionic Vue? I try it in the main.ts, but it show me a lot of errors:
[vue-cli-service] TS7016: Could not find a declaration file for module 'element-ui/lib/locale'. '/Users/marc/Documents/projects/cuanto-cuesta-mi-web-web-app/node_modules/element-ui/lib/locale/index.js' implicitly has an 'any' type.
[vue-cli-service] Try `npm install @types/element-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'element-ui/lib/locale';`
[vue-cli-service] 39 | import esLocale from 'element-ui/lib/locale/lang/es';
[vue-cli-service] 40 | import caLocale from 'element-ui/lib/locale/lang/ca';
[vue-cli-service] > 41 | import locale from 'element-ui/lib/locale'
[vue-cli-service] | ^^^^^^^^^^^^^^^^^^^^^^^
[vue-cli-service] 42 |
[vue-cli-service] 43 |
[vue-cli-service] 44 | require('moment/locale/es')
[vue-cli-service] ERROR in src/main.ts:45:10
[vue-cli-service] TS2339: Property 'moment' does not exist on type 'Plugin_2'.
[vue-cli-service] Property 'moment' does not exist on type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }'.
[vue-cli-service] 43 |
[vue-cli-service] 44 | require('moment/locale/es')
[vue-cli-service] > 45 | IonicVue.moment().locale(lang)
[vue-cli-service] | ^^^^^^
[vue-cli-service] 46 |
[vue-cli-service] 47 |
[vue-cli-service] 48 | const app = createApp(App)
[vue-cli-service] ERROR in src/main.ts:45:26
[vue-cli-service] TS2304: Cannot find name 'lang'.
[vue-cli-service] 43 |
[vue-cli-service] 44 | require('moment/locale/es')
[vue-cli-service] > 45 | IonicVue.moment().locale(lang)
[vue-cli-service] | ^^^^
[vue-cli-service] 46 |
[vue-cli-service] 47 |
[vue-cli-service] 48 | const app = createApp(App)
[vue-cli-service] ERROR in src/main.ts:51:8
[vue-cli-service] TS2345: Argument of type 'VueMoment' is not assignable to parameter of type 'Plugin_2'.
[vue-cli-service] Type 'VueMoment' is not assignable to type '{ install: PluginInstallFunction; }'.
[vue-cli-service] Types of property 'install' are incompatible.
[vue-cli-service] Type 'PluginFunction<undefined>' is not assignable to type 'PluginInstallFunction'.
[vue-cli-service] Types of parameters 'Vue' and 'app' are incompatible.
[vue-cli-service] Type 'App<any>' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 3 more.
[vue-cli-service] 49 | .use(IonicVue)
[vue-cli-service] 50 | .use(router)
[vue-cli-service] > 51 | .use(VueMoment, {
[vue-cli-service] | ^^^^^^^^^
[vue-cli-service] 52 | moment
[vue-cli-service] 53 | }
[vue-cli-service] 54 | .use(ElementUI)
My main.ts:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import { IonicVue } from '@ionic/vue';
/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';
/* Theme variables */
import './theme/variables.css';
const moment = require('moment')
import VueMoment from 'vue-moment'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import './sass/theme/index.css';
import 'animate.css'
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
import esLocale from 'element-ui/lib/locale/lang/es';
import caLocale from 'element-ui/lib/locale/lang/ca';
import locale from 'element-ui/lib/locale'
require('moment/locale/es')
IonicVue.moment().locale(lang)
const app = createApp(App)
.use(IonicVue)
.use(router)
.use(VueMoment, {
moment
}
.use(ElementUI)
.use(VueSweetalert2)
.use(esLocale);
router.isReady().then(() => {
app.mount('#app');
});
Thank you so much!