Develop Reference

how add vuetify in single-spa vue application

vue 2.6.14
vuetify 2.6.9
How do I plug vuetify into a vue application?
I trying import my project in another project how microfrontend application, but something not working
how i went this step-by-step:
create-single-spa root config
created application vue in project
run vue add vuetify in vue app directory
import vuetify in main.js in vue app
profit?... no
package.json
{
"name": "#site/site",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"dependencies": {
"axios": "^0.24.0",
"core-js": "^3.8.3",
"js-cookie": "^3.0.1",
"single-spa-vue": "^2.1.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuetify": "^2.6.9",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.1.0",
"vue-slick-carousel": "^1.0.6",
"vue-social-sharing": "^3.0.9",
"vue-the-mask": "^0.11.1"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"material-design-icons-iconfont": "^6.1.1",
"prettier": "^2.4.1",
"sass": "~1.54.9",
"sass-loader": "^13.0.2",
"vue-cli-plugin-single-spa": "~3.3.0",
"vue-cli-plugin-vuetify": "~2.5.5",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
site/main.js
import Vue from "vue";
import singleSpaVue from "single-spa-vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import VueSocialSharing from "vue-social-sharing";
Vue.config.productionTip = false;
Vue.config.devtools = process.env.VUE_APP_IS_DEV === "true";
Vue.use(VueSocialSharing);
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render(h) {
return h(App);
},
vuetify,
router,
store,
},
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
errors in console

You are trying to import it from plugins, but you probably didn't create file in plugins
import vuetify from "./plugins/vuetify";
Create a plugin file for Vuetify, src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Use opts object to customize themes if you want

Isn't it
Vue.use(Vuetify)
with vuetify like you did with VueSocialSharing?
Vuetify Documentation

Test failures during styles file imports

Encountering issues with setting up Jest for React without the use of Create-React-App.
I do not want to use CRA thus sticking with babel and webpack config setup which does work less Jest.
Jest itself is working fine for testing. It only fails when a component has a css/scss file import.
Seen many similar issues here and tried out the solutions but the issue persists.
Could I get some help with what am doing wrong pls? Thanks.
These are some of the solutions I have tried out which is not working for me.
Tried accepted solution and also the other 2 solutions for this:
jest unexpected token when importing css
A Medium Blog with similar solution
https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
Plus a couple of other examples more related to Vue but similar solution.
The error output as follows:
Jest encountered an unexpected token
Details:
.some-class {
^
This is class being tested:
import React from 'react';
import '../styles/styles.scss' // line causing issue
const App = () => {
const env = process.env.NODE_ENV;
return (
<div>
<h1>sample header</h1>
<p>{`This is in ${env} environment`}</p>
</div>
);
};
export default App;
The Test class
import App from "../../components/App";
import React from "react";
import {shallow} from "enzyme";
it('should get a matching snapshot', () => {
const wrapper = shallow(<App/>)
expect(wrapper.find('h1').text()).toBe('sample header')
expect(wrapper).toMatchSnapshot()
});
Styles file: styles.scss
.some-class {
color: aliceblue;
}
package.json for reference:
{
"name": "tar",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=beta webpack-dev-server",
"build-prod": "cross-env NODE_ENV=production webpack -p",
"build-beta": "cross-env NODE_ENV=beta webpack",
"test": "jest --config=jest.config.json"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"#types/react": "^16.9.49",
"#types/react-dom": "^16.9.8",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"enzyme": "^3.0.0",
"enzyme-adapter-react-16": "^1.0.0",
"enzyme-to-json": "^3.0.1",
"file-loader": "^6.1.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-cli": "^26.6.3",
"mini-css-extract-plugin": "^0.11.1",
"node-sass": "^4.14.1",
"raf": "^3.3.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass-loader": "^10.0.2",
"typescript": "^4.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
"\\.(scss|css|less)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
"transform": {
"\\.js?x$": "<rootDir>/node_modules/babel-jest"
}
}
}
Inside Webpack.config.js (showing partial)
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
Inside . babelrc file
{
"presets": ["#babel/react", "#babel/env"]
}

Looks like you forget to mock scss file during test despite having already had css|less files there.
To fix that, you have to add scss as part of current style file pattern:
package.json
{
"jest": {
"moduleNameMapper": {
// ...
"\\.(css|less|scss)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
}
}
Update
You're currently input jest cli with --config=jest.config.json which is json file which is wrong (it must be js file) that ended up the issue.
The right one should be:
jest --config=jest.config.js // `js` not `json`
But you have 2 config one in jest.config.js and jest area in package.json file. Please try to use one place instead by either remove --config=jest.config.js in CLI or move entire jest block into the config file.

Vuetify a la carte: rollup component complains when used in static html file?

I'm trying to rollup a Vue component which uses some vuetify components. For MWE purpose I have a very simple component, CountButton.vue, which is just a wrapper over <v-btn>
<template>
<div class="">
<v-btn #click="count"> test {{amount}} </v-btn>
</div>
</template>
<script>
import {VBtn} from 'vuetify/lib' // <---- for tree shaking & a la carte
export default {
components: {
VBtn
},
data: () =>({
amount: 0
}),
methods:{
count() {
this.amount += 1
}
}
}
</script>
I then used rollup to bundle this component with the following rollup.entry.js file:
import Vue from 'vue';
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
import CountButton from './components/CountButton.vue'
const components = {
CountButton,
}
function install(Vue) {
if (install.installed) return;
install.installed = true;
Object.keys(components).forEach(name => {
Vue.component(name, components[name])
});
}
const plugin = {
install,
}
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
GlobalVue.use(Vuetify)
}
export default components
export const strict = false
export {
CountButton,
}
and rollup.config.js file:
// rollup.config.js
import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import { terser } from "rollup-plugin-terser";
import minimist from 'minimist';
import async from 'rollup-plugin-async';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'
import css from 'rollup-plugin-css-only'
import pkg from './package.json';
const argv = minimist(process.argv.slice(2));
const config = {
input: './dev/src/rollup.entry.js',
external: [
// 'vue',
],
output: {
name: 'pub',
exports: 'named',
globals: {
'vue': 'Vue',
},
},
plugins: [
vue({
compileTemplate: true,
template: { optimizeSSR: false },
}),
async(),
postcss(),
nodeResolve({
mainFields: [
'module', 'main', 'jsnext',
]
}),
commonjs({
// non-CommonJS modules will be ignored, but you can also
// specifically include/exclude files
include: 'node_modules/**', // Default: undefined
// search for files other than .js files (must already
// be transpiled by a previous plugin!)
extensions: [ '.js', '.coffee' ], // Default: [ '.js' ]
namedExports: {
}, // Default: undefined
// sometimes you have to leave require statements
// unconverted. Pass an array containing the IDs
// or a `id => boolean` function. Only use this
// option if you know what you're doing!
ignore: [ 'conditional-runtime-dependency' ]
}),
babel({
exclude: 'node_modules/**',
externalHelpers: true,
runtimeHelpers: true,
plugins: [
['wildcard', { exts: ['vue'], nostrip: true, },],
// '#babel/plugin-external-helpers',
// '#babel/plugin-transform-runtime'
],
presets: [
['#babel/preset-env', { modules: false, },],
],
}),
],
};
// Only minify browser (iife) version
if (argv.format === 'iife') {
// config.plugins.push(terser()); // commented out for debugging
}
export default config;
Then, in my static HTML, I have:
<meta charset="utf-8">
<title>pub demo</title>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="./pub.min.js" async="false"></script>
<pub-count-button></pub-count-button>
<count-button/>
</script>
Also package.json:
{
"name": "pub",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"build:wc": "npx vue-cli-service build --target wc --name pub 'dev/src/components/*.vue'",
"build:r": "npm run build:r:unpkg & npm run build:r:es & npm run build:r:umd",
"build:r:umd": "rollup --config rollup.config.js --format umd --file dist/pub.umd.js",
"build:r:es": "rollup --config rollup.config.js --format es --file dist/pub.esm.js",
"build:r:unpkg": "rollup --config rollup.config.js --format iife --file dist/pub.min.js"
},
"dependencies": {
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-unit-jest": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"#babel/core": "^7.1.0",
"#babel/plugin-external-helpers": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.1.0",
"#babel/runtime": "^7.0.0-beta.55",
"babel-core": "7.0.0-bridge.0",
"babel-plugin-wildcard": "^5.0.0",
"babel-runtime": "^6.26.0",
"core-js": "^2.6.2",
"css": "^2.2.4",
"from": "^0.1.7",
"import": "0.0.6",
"minimist": "^1.2.0",
"nodemon": "^1.18.9",
"register-service-worker": "^1.6.2",
"rollup": "^0.66.2",
"rollup-plugin-async": "^1.2.0",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-css-only": "^1.0.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-plugin-vue": "^4.3.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"rollup-plugin-terser": "5.1.2"
}
}
The result of this example is that in index.html:
ReferenceError: process is not defined
found in pub.min.js
which corresponds to:
var config = ({
/**
* Option merge strategies (used in core/util/options)
*/
// $flow-disable-line
optionMergeStrategies: Object.create(null),
/**
* Whether to suppress warnings.
*/
silent: false,
/**
* Show production mode tip message on boot?
*/
productionTip: process.env.NODE_ENV !== 'production', <---
Here is a MWE repo
How I got here?
1. have a very simple component, CountButton.vue, which is just a wrapper over the Vuetify component , imported a la carte (see dev/src/components/CountButton.vue)
2. Then I configured rollup (rollup.config.js) and tried to bundle my "package" (just this component) with /dev/src/rollup.entry.js
3. then I rolled up npm run build:r
4. then I tried to use the component: (dist/demo.html)

Can't update Vuetify project to vuetify 2.0.0-beta5

Got a problem when updating from vuetify LTS to vuetify 2.0.0-beta.5.
Before all worked great, vuetify styles were loading from app.scss
Error:
[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot
read property 'dark' of undefined"
TypeError: Cannot read property 'dark' of undefined
[Vue warn]: Error in render: "TypeError: Cannot read property 'dark'
of undefined"
I've uninstalled vuetify, then install and update it to a beta version like this https://stackoverflow.com/a/49250912
package.json
{
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.9.0",
"#mdi/font": "^3.7.95",
"#symfony/webpack-encore": "^0.22.0",
"axios": "^0.19.0",
"chart.js": "^2.8.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue": "^2.6.8",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.8",
"webpack-dev-server": "^3.2.1",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server --hot --disable-host-check --host 174.28.1.5 --public 174.28.1.5:8080",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"apexcharts": "^3.8.1",
"chart.js": "^2.8.0",
"core-js": "^3.1.4",
"vue-apexcharts": "^1.4.0",
"vue-google-signin-button": "^1.0.4",
"vue-telegram-login": "^2.1.0",
"vuetify": "^1.5.14",
"vuex": "^3.1.1"
}
}
webpack.config.js
var path = require('path');
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addStyleEntry('styles', './assets/css/app.scss')
.enableSassLoader()
.enableVueLoader()
.addEntry('landing', './assets/js/modules/landing/main.js')
.addEntry('main', './assets/js/modules/dashboard/main/main.js')
.addEntry('main-m', './assets/js/modules/dashboard_m/main.js')
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.enableVersioning(Encore.isProduction())
.enableSingleRuntimeChunk()
;
main_config = Encore.getWebpackConfig();
main_config.resolve.alias["~"] = path.resolve(__dirname, 'assets/js');
module.exports = main_config;
main.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import VueApexCharts from 'vue-apexcharts';
import Dashboard from './Dashboard';
import store from './store/index'
Vue.component('current-session', () => import('./DashboardModule'));
Vue.use(Vuetify, {
iconfont: 'fa'
});
Vue.use(VueApexCharts);
Vue.component('apexchart', VueApexCharts);
require('apexcharts');
require('vue-apexcharts');
new Vue({
el: '#dashboard-m',
store,
components: {Dashboard},
render: a => a(Dashboard),
});
app.scss
#import "~#fortawesome/fontawesome-free/css/all.min.css";
have made a try to fix it by adding vuetify-loader, not that i have made it correctly but it still not working, here my updates:
webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
// .enableSassLoader() - turned off it
.addLoader({
test: /\.s(c|a)ss$/,
use: [
'style-loader',
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true, // optional
}
}
]
})
delete node-sass from package.json
So when a have added this
<v-app id="inspire" :dark="false">
i have solved my problem with <v-app> tag, but got that another components do not load default props
like this:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property
'register' of undefined"
or this:
[Vue warn]: Error in getter for watcher "showOverlay": "TypeError:
Cannot read property 'width' of undefined"

Thanks jacek (Vuetify core team)
Here right way to add vuetify to Vue:
// v2.0
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
const opts = { ... }
Vue.use(Vuetify)
new Vue({
vuetify: new Vuetify(opts)
}).$mount('#app')

Jest encountered an unexpected token React

This is screenshot of error:
I have 2 tests, the first one is working alright: sum.js :
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.test.js
const sum = require('./sum');
test('adds 2 + 5 to equal 7', () => {
expect(sum(2, 5)).toBe(7);
});
it works okay, prints message in console.
the second one (I dont sure) is set by default by create-react-app
App.test.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.js :
import React, { Component } from 'react';
import {HashRouter} from "react-router-dom";
import Routes from './routes';
import Alerts from './app/components/alerts';
import Navbar from '../src/app/navbar/navbar'
import Auth from './app/settings/auth';
import Register from './app/entities/user/modify-modal';
import './index.scss';
class App extends Component {
componentWillMount(){
}
render() {
return (
<HashRouter>
<>
<Auth></Auth>
<Navbar></Navbar>
<Alerts></Alerts>
<Register/>
<div className={"content-root"}>
<Routes/>
</div>
</>
</HashRouter>
);
}
}
export default App;
package.json
{
"name": "x5_r_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.2.3",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.12",
"#fortawesome/free-solid-svg-icons": "^5.6.3",
"#fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"bootstrap": "^4.2.1",
"jest": "^24.5.0",
"jest-cli": "^24.5.0",
"jsdom": "^14.0.0",
"moment": "^2.23.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-addons-test-utils": "^15.6.2",
"react-bootstrap": "^1.0.0-beta.5",
"react-bootstrap-typeahead": "^3.2.4",
"react-datetime": "^2.16.3",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"react-select": "^2.3.0",
"reactstrap": "^7.0.2",
"rxjs": "^6.3.3",
"scss": "^0.2.4",
"test": "^0.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.5.0"
}
}
package-lock.json is 20000 rows of code, so I dont know, what part of it is needed for explanation of my problem, all guides that I've read about this problem were useless for me, so I am asking here.

The issue is that the app was bootstrapped with create-react-app, but then the latest version of Jest was also installed and the npm test script within package.json was changed to launch jest directly.
The test failed since Jest was not configured to transpile the JSX syntax.
Tests that use syntax like JSX have to be transpiled before they can be run by Jest.
create-react-app includes react-scripts which handles all of that configuration automatically.
If an app is bootstrapped with create-react-app then Jest does not need to be installed and configured manually.
If an app is not bootstrapped with create-react-app, or if the app is ejected from create-react-app, then Jest needs to be installed and configured to transpile the test code.