Vuetify or VueBootstrap doesn't work

1

I am working on a project entirely in Meteor and I would like to use cool components from Vuetify or VueBootstrap.

Both libraries are well installed on my project but their components do not work.

I did not find many topics dealing with this problem, as if it was obvious that we can not use these libraries with Meteor.

My packages.json:

{
  "name": "Projet_Perso",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.3.4",
    "bcrypt": "^3.0.6",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "caniuse-lite": "^1.0.30000989",
    "meteor-node-stubs": "^0.4.1",
    "moment": "^2.24.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "simpl-schema": "^1.5.5",
    "vue": "^2.6.10",
    "vuetify": "^1.5.18"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.9.0"
  }
}

Meteor uses Vue, why it would not work. I need to better understand and ideally manage to use one of these libraries.

2

I’ve been able to get Vuetify@1.5.18 to work happily with Meteor, just by following the instructions here:

//// client/main.js

import Vue from 'vue';
import VueMeteorTracker from 'vue-meteor-tracker';
Vue.use(VueMeteorTracker);

// Vuetify
import Vuetify from 'vuetify'; 
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

I’ve had a couple of quick attempts at upgrading to 2.1.1 but I get lots of errors so have reverted back to 1.5.18 until I have more time to fiddle.

Edit: did you remember to import 'vuetify/dist/vuetify.min.css'?

3

Looked a bit more closely at your packages.json. Why do you have Vue AND React installed, and also have Bootstrap AND Vuetify installed, all at the same time?

You should only really use one of each at a time…

1 Like
4

I’ve had a play and finally got Vuetify 2.x working with Meteor. I was missing a crucial step. See my post here:

However, there are TONS of breaking changes between the 1.x and 2.x Vuetify API so I think I’ll stick with 1.5 for now…

5

importing 'vuetify/dist/vuetify.min.css' throws the following error: i am using Vuetify 1.5.20. What could i be missing?

W20191102-23:26:31.343(-5)? (STDERR) C:\temp\vuemeteor2\node_modules\vuetify\dist\vuetify.min.css:1
W20191102-23:26:31.345(-5)? (STDERR) (function (exports, require, module, __filename, __dirname) { @-webkit-keyframes shake{59%{margin-left:0}60%,80%{margin-left:2px}70%,90%{margin-left:-2px}}@keyframes shake{59%{margin-left:0}60%,80%{margin-left:2px}70%,90%{margin-left:-2px}}.black{background-color:#000!important;border-color:#000!important}.black--text{color:#000!important;caret-color:#000!important}.white{background-color:#fff!important;border-color:#fff!important}.white--text{color:#fff!important;caret-color:#fff!important}.transparent{background-color:transparent!important;border-color:transparent!important}.transparent--text{color:transparent!important;caret-color:transparent!important}.red{background-color:#f44336!important;border-color:#f44336!important}.red--text{color:#f44336!important;caret-color:#f44336!important}.red.lighten-5{background-color:#ffebee!important;border-color:#ffebee!important}.red--text.text--lighten-5{color:#ffebee!important;caret-color:#ffebee!importa
W20191102-23:26:31.449(-5)? (STDERR) 
W20191102-23:26:31.451(-5)? (STDERR) SyntaxError: Invalid or unexpected token
W20191102-23:26:31.518(-5)? (STDERR)     at createScript (vm.js:80:10)
W20191102-23:26:31.574(-5)? (STDERR)     at fileEvaluate (packages\modules-runtime.js:336:7)
W20191102-23:26:31.576(-5)? (STDERR)     at Module.require (packages\modules-runtime.js:238:14)
W20191102-23:26:31.611(-5)? (STDERR)     at Module.moduleLink [as link] (C:\Users\AjitGoel\AppData\Local\.meteor\packages\modules\0.13.0\npm\node_modules\reify\lib\runtime\index.js:38:38)
W20191102-23:26:31.613(-5)? (STDERR)     at plugins.js (src/imports/plugins.js:1:1)
W20191102-23:26:31.615(-5)? (STDERR)     at fileEvaluate (packages\modules-runtime.js:336:7)
W20191102-23:26:31.617(-5)? (STDERR)     at Module.require (packages\modules-runtime.js:238:14)
W20191102-23:26:31.618(-5)? (STDERR)     at Module.moduleLink [as link] (C:\Users\AjitGoel\AppData\Local\.meteor\packages\modules\0.13.0\npm\node_modules\reify\lib\runtime\index.js:38:38)
W20191102-23:26:31.619(-5)? (STDERR)     at app.js (src/imports/app.js:1:1)
W20191102-23:26:31.620(-5)? (STDERR)     at fileEvaluate (packages\modules-runtime.js:336:7)
W20191102-23:26:31.621(-5)? (STDERR)     at Module.require (packages\modules-runtime.js:238:14)
=> Exited with code: 1
6

Hi @ajitgoel,

Based on your code sample at StackOverflow, you are attempting to import the css into the server code. Try this instead:

source\index.js:

import './imports/api/methods';
if (Meteor.isClient) 
{
  import './imports/client';
  import 'vuetify/dist/vuetify.min.css';
} 
else if (Meteor.isServer) 
{
  import './imports/server';
  import './imports/server/logging';  
}
7

Hi @wildhart. Check out this package: https://github.com/Hernanm0g/meteor-vuetify-loader , i think it may help you integrating vuetify TreeShaking to meteor bundler, Reducing bundle size…