getting error when trying to upgrade to vuetify 2.0 - vue.js

Ok so I am trying for the second time to migrate thus far it has been a complete failure it seems that vuetify is not detected, unfortunately I cannot share my full repo since it is work related, but will describe steps and share relevant code.
Project was created with vue-cli 3.3.0 with a vue.config.js file for environment variables.
1) npm uninstall vuetify
2)vue add vuetify
3)npm run serve
my site does not load and I get this error (adding code):
//vue.config.js
module.exports = {
chainWebpack: (config) => {
config.plugin('define')
.tap(([options, ...args]) => {
let env = options['process.env'].VUE_APP_ENV.replace(/"/g,'');
let envMdl = require('./build/' + env.toString() + '.js');
// replace all current by VUE concrente ones to be passed to the app
const processEnv = Object.assign({}, options['process.env'])
Object.keys(envMdl).forEach(function (k) {
processEnv['VUE_APP_' + k] = envMdl[k];
});
const ret = Object.assign({}, options, {'process.env': processEnv});
return [
ret,
...args
]
})
}
}
//vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdiSvg',
},
})
//main.js
import vuetify from './plugins/vuetify'
...
new Vue({
vuetify,
router,
store,
i18n,
render: h => h(App),
...
Error message (and screenshot): Uncaught TypeError: _lib.default is not a constructor
at eval (vuetify.js?402c:6)

The main problem is that Vuetify v1 works under the Stylus preprocessor, and in v2 it works under the SASS preprocessor, and I personally do not recommend migrating to v2 if it is too advanced and even worse if it has custom Vuetify components.

Related

Using Stencil components with Ionic Vue

In the Stencil docs section on framework integration with Vue it states the following:
In order to use the custom element library within the Vue app, the
application must be modified to define the custom elements and to
inform the Vue compiler which elements to ignore during compilation.
According to the same page this can be achieved by modifying the config of your Vue instance like this:
Vue.config.ignoredElements = [/test-\w*/];
This relates to Vue 2 however. With Vue 3 (which Ionic Vue uses) you have to use isCustomElement as stated here.
Regretably, I can’t for the life of me get Vue and Stencil to play nice. I have tried setting the config like this:
app.config.compilerOptions.isCustomElement = tag => /gc-\w*/.test(tag)
This causes Vue throw the following warning in the console:
[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `#vue/compiler-dom` in the build setup instead.
- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- For vite: pass it via #vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/p
However, I have no idea how to implement any of the above suggestions using Ionic Vue. I have been messing around with chainWebpack in config.vue.js but without success so far.
Any help would be greatly appreciated.
I'm not an expert in Vue but here's how I did it:
Add the following to your ./vue.config.js (or create it if it doesn't exist):
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
// ignore Stencil web components
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: tag => tag.startsWith('test-')
}
return options
})
},
}
This will instruct Vue to ignore the test-* components. Source: https://v3.vuejs.org/guide/web-components.html#skipping-component-resolution
Next, load the components in ./src/main.ts.
Import the Stencil project:
import { applyPolyfills, defineCustomElements } from 'test-components/loader';
Then replace createApp(App).use(router).mount('#app') with:
const app = createApp(App).use(router);
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements();
});
app.mount('#app')
Source: https://stenciljs.com/docs/vue
Also, if anyone is using vite2+, just edit the vite.config.js accordingly:
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('test-') // ✅ Here
}
}
}) ],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})

How to Convert Vue 2 x to Vue 3 x?

We are integrating Vue into an existing ASP.Net MVC Application
Below code (Vue 2 X)working fine in our .Net Application
new Vue({
el: '#component1',
render: h => h(App)
});
To convert Vue 2 X to Vue 3 X used command "vue add vue-next" , after executing command version changed but "npm run build" command giving error.
You can use the Vue 3 migration build to help with the upgrade. It shims most of the Vue 2 code, while emitting console warnings that help you identify what to migrate.
To enable it in your Vue CLI project (based on installation steps from the migration guide), and to fix the code you mentioned:
Update vue to 3.1, and install #vue/compat of the same version:
npm i -S #vue/compat#^3.1.4
npm i -S vue#^3.1.4
Setup an alias from vue to #vue/compat:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.resolve.alias.set('vue', '#vue/compat')
}
}
Update the app entry to the new global mounting API:
// import Vue from 'vue'
// import App from './App.vue'
// new Vue({ el: '#component1', render: h => h(App) });
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#component1')

UIkit undefined in Vue web component build

I try to build Vue web-component with UIkit as UI library. After proper build with command:
npm run build -- --target wc --inline-vue --name my-element 'src/App.vue'
When I'm trying to embed component in other website UIkit styles are displayed properly, but UIkit instance which handles modal, dropdowns is undefined.
vue.runtime.esm.js:1888 TypeError: Cannot read property 'modal' of undefined
Here is main.js file where I initialize global UIkit variable.
import App from "./App.vue"
import wrap from "#vue/web-component-wrapper"
import Vue from "vue"
import VueFlatPickr from "vue-flatpickr-component"
import uk from "uikit"
import Icons from "uikit/dist/js/uikit-icons.js"
import "flatpickr/dist/flatpickr.css"
uk.use(Icons)
Vue.config.productionTip = true
Vue.use(VueFlatPickr)
Vue.mixin({
data: function() {
return {
get uk() {
return uk
},
}
},
})
const app = new Vue({
render: (h) => h(App)
})
app.$mount("#app")
const WrapperElem = wrap(Vue, App)
window.customElements.define("my-element", WrapperElem)
And here a little example of code how I use it and where the trouble occurs:
this.uk.modal("#delete-dialog").hide()
I've seen your question on the discord channel - I do not have a solution for your question BUT i have already successfully used UIkit 3 and Vue 3 in two of my projects with this base, may it helps you:
https://medium.com/#4ravind/uikit-with-vuejs-vue-cli-3-db811e43c46b

plugin is not defined in instance.vue

I struggle to add a plugin in Nuxt.js. I have been looking to the doc and all kind of similar problems, but I got the same error: simpleParallax is not defined.
I tried different approach on all files
nuxt.config.js:
plugins: [
{src: '~/plugins/simple-parallax.js', mode:'client', ssr: false}
],
plugins/simple-parallax.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);
index.vue:
Export default {
plugins: ['#/plugins/simple-parallax.js'],
mounted() {
var image = document.getElementsByClassName('hero');
new simpleParallax(image, {
scale: 1.8
});
}
}
Error message:
ReferenceError: simpleParallax is not defined.
The best solution I found out so far is to register simpleParallax on the Vue prototype like so in a plugin nuxt file with the name simple-parallax.client.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;
Also my nuxt.config.js file if anyone would like to verify that as well:
plugins: [
{src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],
I then have access to the plugin before instantiation in my case in the mounted life cycle of the primary or root component to grab the desired HTML elements and instantiate their individual parallax with the newly added global method this.$simpleParallax
For example I can then intiate a certain HTML element to have its parallax like so:
const someHTMLElement = document.querySelectorAll('.my-html-element');
const options = {...} // your desired parallax options
new this.$simpleParallax(someHTMLElement, options);
Actually you don't need to use plugin here.
Just import simpleParallax from 'simple-parallax-js' in your component and init it with your image in mounted hook.
index.vue:
import simpleParallax from 'simple-parallax-js'
export default {
...
mounted() {
// make sure this runs on client-side only
if (process.client) {
var image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)
}
},
...
}
And don't forget to remove previously created plugin, it's redundant here.

How to use Graphql in NuxtJs

So I want to implement GraphQL into NuxtJs.
Now I need to have a provider into the root element, but NuxtJs doesn't give me this option.
How would I inject the apolloProvider into the root Vue element?
What I'm trying to accomplish:
https://github.com/Akryum/vue-apollo
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
new Vue({
el: '#app',
apolloProvider,
render: h => h(App),
})
What I've tried:
Creating a plugin: /plugins/graphql.js:
import Vue from 'vue'
import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
import VueApollo from 'vue-apollo'
// Create the apollo client
const apolloClient = new ApolloClient({
networkInterface: createBatchingNetworkInterface({
uri: 'http://localhost:3000/graphql'
}),
connectToDevTools: true
})
// Install the vue plugin
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
defaultClient: apolloClient
})
export default apolloProvider
Importing the apolloProvider in .nuxt/index.js:
...
import apolloProvider from '../plugins/graphql'
...
let app = {
router,
store,
apolloProvider,
_nuxt: {
defaultTransition: defaultTransition,
transitions: [ defaultTransition ],
...
Unfortunately this provides me with 2 problems; each time the server restarts, my code in the .nuxt directory is wiped. Besides that it gives me the following error:
TypeError: Cannot set property '__APOLLO_CLIENT__' of undefined
at new ApolloClient (/current/project-nuxt/node_modules/apollo-client/src/ApolloClient.js:112:37)
at Object.<anonymous> (plugins/graphql.js:6:21)
at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
at Object.module.exports.__webpack_exports__.a (server-bundle.js:1060:76)
at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
at Object.<anonymous> (server-bundle.js:1401:65)
at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
at server-bundle.js:95:18
at Object.<anonymous> (server-bundle.js:98:10)
at evaluateModule (/current/project-nuxt/node_modules/vue-server-renderer/build.js:5820:21)
at /current/project-nuxt/node_modules/vue-server-renderer/build.js:5878:18
at /current/project-nuxt/node_modules/vue-server-renderer/build.js:5870:14
at Nuxt.renderToString (/current/project-nuxt/node_modules/vue-server-renderer/build.js:6022:9)
at P (/current/ducklease-nuxt/node_modules/pify/index.js:49:6)
at Nuxt.<anonymous> (/current/project-nuxt/node_modules/pify/index.js:11:9)
at Nuxt.ret [as renderToString] (/current/project-nuxt/node_modules/pify/index.js:72:32)
at Nuxt._callee2$ (/current/project-nuxt/node_modules/nuxt/dist/webpack:/lib/render.js:120:24)
at tryCatch (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:65:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:303:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:117:21)
at step (/current/project-nuxt/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
at /current/project-nuxt/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
Maybe a little late, but there is #nuxtjs/apollo plugin.
I've used this for my blog, using Nuxt 1.0, I'm still doing some testing on Nuxt2, but its giving me issues.. guess I'll stick with V1 for the moment.
.nuxt folder restarts every time you rebuild the project, so it would not be the ideal place to inject your module.
Nuxt has nuxt.config.js where you can add your modules to its module array.
they are imported at runtime so make sure they are already transpiled (eg. all the es6 conversions are taken care off)
better description is available in the docs
#nuxtjs/apollo seems like a good option, however if you want to write your own graphql module, this is the way
I'm using [nuxt-apollo][1] "nuxt": "^2.10.2" without issues so far.
npm i #nuxtjs/apollo &&
npm install --save #nuxtjs/apollo
# if you are using *.gql or *.graphql files add graphql-tag to your dependencies
npm install --save graphql-tag
1.Youll need to set up your config as you've stated above,
In nuxt.config.js
export default {
...
modules: ['#nuxtjs/apollo'],
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu' //link to your graphql backend.
}
}
}
}
Make your query
in gql/allCars.gql
{
allCars {
id
make
model
year
}
}
use graphql in your component
in pages /index.vue
<script>
import allCars from '~/apollo/queries/allCars'
export default {
apollo: {
allCars: {
prefetch: true,
query: allCars
}
},
head: {
title: 'Cars with Apollo'
}
}
</script>