Vuetify Loader for Meteor

This Meteor package loads the Vuetify components as you use them (TreeShaking), reducing the final bundle size and enhancing your RealTime App performance, also bringing a better development experience.

https://vuetifyjs.com/en/features/treeshaking/

Vuetify's A La Carte System and sass-loader based on dart-sass can work now in Meteor without replacing Meteor's default Bundler with Webpack.

Idea

1. Since Vuetify's A La Carte System is tightly bounded to Webpack bundler, if you want to use this UI framework in a serious project, you'll need to remove Meteor's default bundler and compiler and replace it with Webpack Bundler, probably using Meteor's ardatan:webpack package. But this change will impact the way you develop in Meteor (especially in Mobile) in such way, that we all need a different approach, based on Meteor's own Bundler.
2. meteor+webpack is a "good" choice if you are an expert configuring webpack and babel and have time to experiment with them, but its a terrible choice for beginners or for rapid development, or Cordova Integration (Meteor+Webpack breaks HMR on Cordova).
3. fourseven:scss (the default meteor's sass-loader) uses node-sass (a deprecated sass compiler), and will not work properly with Vuetify's Sass files. So we need to create a SCSS/SASS compiler using dart-sass (sass npm package).
4. The .vue Single File Components Compiler, recognizes any vuetify component inside the template tag of your .vue file, and imports it's module, config and styles on the fly...
5. I know there are a lot of developers in search of a decent Meteor-Vuetify integration ¿Are we able to develop a Vuetify-Loader package with A la Carte System and TreeShaking working in Meteor Framework? Lets see...

Credits

• @akryum of course. thanks for all the effort bringing vue to Meteor.
• @fourseven:scss, i've tweaked your package a little bit to replace node-sass with dart-sass. Thanks!!
• @johnleider We all love Vuetify!!

Warning

This package is in an early development stage, use it at your own risk.

If you find any problem with it, dont hesitate to improve it and make a PR, or submit an issue.

If it works for you, great!!, enjoy...

Installation

1. Remove fourseven:scss if you have it:

   meteor remove fourseven:scss

2. Add this package:

   meteor add zer0th:meteor-vuetify-loader

3. Add ignore-styles npm module to your main app:

   meteor npm i ignore-syles

4. Add akryum vue-component package if you havent already:

   meteor add akryum:vue-component

5. Go o to .meteor/packages file and make sure zer0th:meteor-vuetify-loader is above akryum:vue-component

6. Make sure you are importing vuetify/lib/framework instead of vuetify. This will reduce your first client bundle!!.

1  import Vue from 'vue'
2
3  /*--------  The magic goes here  --------*/
4
5
6  import Vuetify from 'vuetify/lib/framework'
7  // IMPORTANT!!  These lighter import will break HMR.
8  // If you need HMR while developing, use the standard:
9  // import Vuetify from 'vuetify/lib'
10
11  // Import colors if you want to use colors presets
12  import 'vuetify/lib/util/colors'
13
14  // Import directives if you want to use them
15  import 'vuetify/lib/directives'
16
17
18  Vue.use(Vuetify)
19
20  const opts = {}
21  export default new Vuetify(opts)

5. Important !!!: In order to load Vuetify Components on the fly in your .vue files, you must add a "lang" attribute to the 'script' tag. like this:

1  <template>
2    <v-button> <!-- The VButton component will be loaded on the fly-->   
3      Anything
4    </v-button>    
5  <template>    
6  <script lang="js"> //  <--- the magic goes here, you can use 'ts' as well.
7    export default {
8      name:"ComponentName",
9      data: ()=>({
10        someData: ""
11      })
12    }
13  </script>

6. Enjoy!!... Or improve it!!

SASS Variables

In order to use the custom sass-variables, do this:

1. Create a file named user_variables.scss, anywhere inside imports/ folder. for instance: /imports/ui/styles/vuetify/user_variables.scss
2. Put your variables definitions inside user_variables.scss:

   $btn-sizes: (
     'default': 60,
     'large': 90
   );

3. Create a file named scss-config.json as a direct child of your main app folder.
4. Create an array inside the prop includePaths, and place there the PATH (without the file name!!) of the folder where user_variables.scss is.

   1{
   2  "includePaths": [
   3    "{}/imports/ui/styles/vuetify/"
   4  ]
   5}

Thats it!

Importing SFC from packages

If you have your .vue Single File Components inside Meteor packages, check this out:

1. Ensure that vuetify module its installed in the app's node_modules. If not, use:

   meteor npm i vuetify

2. You dont need to install Vuetify or Meteor-vuetify-loader (this package) in your Meteor packages, as the compilers will work anywhere.

3. Make sure your Meteor packages that are exporting SFCs use akryum's vue-component package

   1
   2 Package.onUse(function(api) {
   3   ...
   4   api.use('akryum:vue-component@0.15.2');
   5   ...
   6 });
   7
   

4. Put the lang attribute inside the script of your package's SFC.

   1<script lang="js"> //  <--- the magic goes here, you can use 'ts' as well.
   2  export default {
   3    name:"YourPackageComponent",
   4    ...anythingElse
   5  }
   6</script>