0

Is there a way to integrate Vuetify with VueJs and MeteorJs so I can use its pre-build components. I have tried to install both Vuetify 1.5.19 and 2.1.7 using the following forum comments but I get errors when I import the vuetify.min.css into the application..

What am I missing?

source\index.js:

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

StackTrace:

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

package.json:

{
  "name": "vue-meteor-demo",
  "private": true,
  "scripts": {
    "start": "meteor run --settings settings.json",
    "debug": "meteor run meteor --settings settings.json --inspect-brk=9229"
  },
  "dependencies": {
    "@babel/runtime": "^7.6.3",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "apollo-link": "^1.2.13",
    "apollo-link-http": "^1.5.16",
    "aws-sdk": "^2.556.0",
    "bcrypt": "^3.0.6",
    "core-js": "^3.3.2",
    "graphql": "^14.5.8",
    "graphql-tag": "^2.10.1",
    "intersection-observer": "^0.6.0",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.15",
    "marker-clusterer-plus": "^2.1.4",
    "material-design-icons-iconfont": "^5.0.1",
    "meteor-node-stubs": "^0.4.1",
    "moment": "^2.24.0",
    "vue": "^2.6.10",
    "vue-apollo": "^3.0.0",
    "vue-googlemaps": "^0.1.2",
    "vue-meteor-tracker": "^2.0.0-beta.5",
    "vue-observe-visibility": "^0.4.6",
    "vue-router": "^3.1.3",
    "vue-supply": "^0.3.0",
    "vuelidate": "^0.7.4",
    "vuetify": "^1.5.20",
    "vuex": "^3.1.1",
    "vuex-router-sync": "^5.0.0",
    "winston": "^3.2.1",
    "winston-loggly-bulk": "^3.0.1"
  },
  "devDependencies": {
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "vue-template-compiler": "2.6.10"
  }
}

1 Answer 1

1

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';  
}
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you @Wildhart, that's what I got around to doing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.