I am moving to vuetify-loader and each time i remove an old import import {VAlert} from 'vuetify/lib' the hot module reload fail and i get a blank page with this error in my console:
Uncaught TypeError: Cannot read property 'default' of undefined

The console say it come from this script (cc-alert is my component where i just remove the old import) were mod seems undefined.
import mod from "-!../../../node_modules/vuetify-loader/lib/loader.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cc-alert.vue?vue&type=script&lang=js&"; export default mod; export * from "-!../../../node_modules/vuetify-loader/lib/loader.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cc-alert.vue?vue&type=script&lang=js&"

I need to restart my npm task to make it work.

I have rather odd situation regarding vuetify and vuetify loader plugin.

I posted problem on stackoverflow and Vue forum but without any luck so far. I've created simple SPA with implemented Vue and Vuetify and while in dev mode everything works fine I'm having problem in production mode. I'm getting rather strange error regarding my components

Uncaught TypeError: T(...)(...) is not a function
at Module.56d7 (VectorFeatures.vue:37)
at r (bootstrap:78)
at Object.0 (bootstrap:151)
at r (bootstrap:78)
at i (bootstrap:45)
at bootstrap:151
at bootstrap:151

Further inspecting error I'm getting this :

My vue.config.js is this:

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/hr-map/'
        : '/vue-map/',
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                // modify the options...
                return options
            })
    }
}

And my router is this:

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/views/Dashboard.vue'
import Croatia from '@/views/CroatiaMap.vue'
import Poland from '@/views/PolandMap.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/croatia',
      name: 'croatia',
      component: Croatia,
      meta: { keepAlive: true }
    },
    {
      path: '/poland',
      name: 'poland',
      component: Poland,
      meta: { keepAlive: true }
    }
  ]
})

Also worth mentioning is when I comment out lets say poland or croatia everything works fine on production

Originally posted by @NevenD in #20 (comment)

Environment

Vuetify Version: 2.0.1
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

Add a v-touch directive to a component.

Expected Behavior

V-touch directive works with touch inputs.

Actual Behavior

V-touch throws exception: "Failed to resolve directive: touch"

Reproduction Link

https://github.com/cmseeling/vuetify-touch-issue

My project uses NUXT with the built in vuetify, but this doesn't seem to include the Progressive Images feature. I've installed this and added the VuetifyLoaderPlugin, but I can't figure out the rest.

Would anyone know what my nuxt.config.js should look like to get progressive images?

I do have ImageMagick.

Hi ived tried many times, using it with laravel mix, but i keep getting error...
I understand this one is build to be used for vue-cli 3, yeah it works with nuxt also
but in case of laravel mix, how can use it on it, hope someone can help me with it thanks

It would be nice if the loader would support

<nuxt-link tag="v-btn" to="/path"></nuxt-link>

After opening nuxt-community/router-extras-module#15 we determined that, as the title states, vuetify-loader is not ignoring unknown top-level tags as per the Single-File Component spec.

I'm currently looking for a workaround.

Hi, I've got several components written in jsx(in js files). Can vuetify-loader be configured to work with js components as well? I failed to figure it out with myself.

Environment

Vuetify Version: 2.0.0
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Linux x86_64

Steps to reproduce

-Configure vuetify with nuxt and init server
-Load initial page and see HEAD in DOM

Expected Behavior

Only one stylesheet in dom.
When change primary color in theme using javascript must be changed.

Actual Behavior

Two stylesheets in dom.
When change primary color using javascrip only first stylesheet is updated and nothing change in web

Reproduction Link

Other comments

I've commented the problem in the previous fix thread:
vuetifyjs/vuetify#7443

Hey! Awesome plugin. Just wanted to ask, is it possible to use vue-styleguidist inside template and keep vuetify-loader working?

I am getting the following error: Uncaught TypeError: "" is not a function if vuetify-loader is enabled and if my .vue file contains the following which is required to have example in vue-styleguidist documentation:

<docs>
```vue
  <template>
  </template>

Use of pug in components seems to prevent the new auto a-la-carte from working as intended.

Here is an example repo: https://github.com/shongololo/vuetify-a-la-carte

Example errors:

[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/components/App.vue
       <Root>

Environment

Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

I cannot reproduce in codepen, so it must be something with my local setup.

Expected Behavior

v-list-item-icon element should be converted to div with appropriate classes

Actual Behavior

remains v-list-item-icon element in final html
Error message: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option

Reproduction Link

Other comments

Does anyone have any recommendations for how I can debug? I'm not sure where to start. Does it have to do with vuetify-loader? The VListItemIcon.js file is in vuetify/lib/components/VList directory. I'm using vuetify 2.0.1

Hi!

I'm using this awsome project, and just faced a case where I needed to register some Vuetify components globally.

It's not documented, and so not obvious, but you can add global components while still using automatic import!

See:

import Vuetify, { VDatePicker, VTextField, VMenu } from 'vuetify/lib';

Vue.use(Vuetify, {
	components: {
		VDatePicker,
		VTextField,
		VMenu
	}
});

So maybe you can add documentation for that somewhere?

The default vue cli 3.x projects use the so-called "no config" webpack. It's not clear to me (only me?) how to add VuetifyProgressiveModule to these vue cli 3.x projects.

Thank you for this library!

Found my self struggling with Error: Stream yields empty buffer on windows 10.
I think it's better to use the more cross-platform image processor

Thanks.

Consider the following component file contents: my-comp.vue

<template src="./my-comp.html"></template>
<style src="./my-comp" lang="scss"></style>
<script src="./my-comp.ts" lang="ts"></script>

In order for the loader to work correctly, it should consider a src attribute if defined.

Using the same code base, when switching from a-la-carte configuration to using vuetify-loader, we see a 10% increase in build size.

Before:

After:

It seems that the usage of vuetify/lib/ instead of vuetify/es5/ makes the build bigger. Is it possible to remedy this by only importing from vuetify/es5/ ?

Versions and Environment

Vuetify: 1.3.0-alpha.1
Vue: 2.5.17
Browsers: Chrome 69.0.3497.100
OS: Mac OS 10.13.6

Steps to reproduce

npm i
npm run dev

Remove <template/> from components/TestComponent.vue so the render method is used.

Expected Behavior

Changes will update in browser

Actual Behavior

Nuxt will fail to compile

 ERROR  Failed to compile with 1 errors

Module build failed (from ./node_modules/vuetify-loader/lib/loader.js):
TypeError: Cannot read property 'content' of null
    at Object.module.exports (/Users/chris/Work/nuxt-vuetify-loader/node_modules/vuetify-loader/lib/loader.js:24:41)

Reproduction Link

https://github.com/csheppard/nuxt-vuetify-loader

Other comments

This may not be related to Nuxt at all but its how I've encountered the error my app.

Versions and Environment

Vuetify: 1.3.0-alpha.1
Vue: 2.5.17
Browsers: Chrome 69.0.3497.100
OS: Mac OS 10.13.6

Steps to reproduce

npm i
npm run dev

Expected Behavior

Render the same example from https://vuetifyjs.com/en/components/data-iterator#usage--1 in pages/index.vue

Actual Behavior

Chrome console errors:

commons.app.js:9035 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

[Vue warn]: Unknown custom element: <v-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VDataIterator>
       <VCard>
         <Pages/index.vue> at pages/index.vue
           <Nuxt>
             <VContent>
               <VApp>
                 <Default> at layouts/default.vue
                   <Root>

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

[Vue warn]: Unknown custom element: <v-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VDataIterator>
       <VCard>
         <Pages/index.vue> at pages/index.vue
           <Nuxt>
             <VContent>
               <VApp>
                 <Default> at layouts/default.vue
                   <Root>

Reproduction Link

https://github.com/csheppard/nuxt-vuetify-loader

Other comments

This may not be related to Nuxt at all but its how I've encountered the error my app.

Hi all,

It seems that the loader doesn't play well when declaring vue files with side files as follow:

<template src="./my-component.html" />
<script src="./my-component.js" />
<style src="./my-component.css" />

Vuetify components are properly imported on vue cli serve command, but not during hot reload:

[Vue warn]: Unknown custom element: <v-card-text> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

BTW, thanks a lot for this plugin 😃

The auto loading directive feature added in v1.2.0 is exposing vuetify's click-outside directive. This is clashing with a globally registered custom directive I'm using with the same name, so for the moment I've rolled back to v1.1.1.

I realise I can rename my custom directive or I can register it locally to resolve the issue, but seeing as vuetify's version of click-outside is undocumented and has been conditionally optimised for internal use only I don't think vuetify-loader should be auto loading it when it isn't ready for public use.

vuetifyjs/vuetify#4654 contains some supporting discussion on this topic.

I am getting this error when deployed to server (nuxt on GCloud)

Error: Cannot find module 'webpack/lib/RuleSet'
    at Object.<anonymous> (/srv/node_modules/vuetify-loader/lib/plugin.js:1)

When using the vuetify-loader while applying a custom stylus style entry, you are faced with a scenario where the final build off of webpack produces duplicate stylus packages.

1. From the stylus/entry.stylus
2. From the vuetify/lib/component/.... -> calls import component.stylus

Not sure how to properly address this but one suggestion may to add an option into the Vuetify/lib components to disable the automatic stylus import.

Here's a github repo that I've created to dive into this issue. https://github.com/uptownhr/vuetify-loader-repo

Hi, I am running a Vue/typescript/vuetify(a la carte) project.
Upgraded to version 1.3.1.
Added the vuetify-loader plugin to vue.config.js

"vue": "^2.5.17"
"vuetify-loader": "^1.0.5"
"vue-cli-plugin-vuetify": "^0.3.0"
"vuetify": "^1.3.1"

Error:

Module parse failed: Identifier 'installComponents' has already been declared (53:7)
You may need an appropriate loader to handle this file type.
|
| /* vuetify-loader */
> import installComponents from "!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js"
| import { VBtn } from 'vuetify/lib'
| import { VCard } from 'vuetify/lib'

We updated to vuetify 2.0.1 and also got an update for vuetify-loader 1.3.0. We followed the guide for customizing the styles (scss/sass) and everything worked so far.

But as soon as we update to v1.3.0 of vuetify-loader the styles are gone/not imported.

We import the styles via a rule in a webpack.config:

rules: [
      {
        test: /\.sass$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              data: `@import '@styles/main.scss'`,
              implementation: require("sass"),
              fiber: require("fibers"),
              indentedSyntax: true // optional
            }
          }
        ]
      },

If you need any more information, please let me know.

When using v-data-iterator with content-tag property enabled, It seems that component is not injected automatically.

I got an error below:
custom element: <v-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in

Will there be any temporary fix for this?

This could be the fix, using OS specific path segment separator:

const loaderUtils = require('loader-utils')
const vuetifySrc = require('path').join('vuetify', 'src')

module.exports = function (source) {
  const options = loaderUtils.getOptions(this)

  if (options.theme && this.resourcePath.endsWith('.styl')) {
    if (this.resourcePath.includes(vuetifySrc) || options.globalImport) {
      return `@import '${options.theme}'\n${source}`
    }
  }

  return source
}

Versions and Environment

Vuetify: 1.3.0-alpha.1
Vue: 2.5.17
Browsers: Chrome 69.0.3497.100
OS: Mac OS 10.13.6

Steps to reproduce

npm i
npm run dev

Make a structural change to force rerender, e.g. add another item in layouts/defaults.vue.

Expected Behavior

Changes will update in browser

Actual Behavior

All Vuetify components will fail to reload
e.g.
[Vue warn]: Unknown custom element: <v-navigation-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Reproduction Link

https://github.com/csheppard/nuxt-vuetify-loader

It seems that this package relies on pug however it doesn't install it in its dependency and it would make sense that it does (if it actually needs it) rather then relying on the user to install it when they don't need it.

this happens when I have merger conflicts

Environment:
nuxt.js 2.2.0 used programatically with a koa web server written in typescript.

I just switched from importing any component on every page to using vuetify-loader.
When loading the page I get the following error:

[Node] [13:56:35] /Users/pascal/code/web/node_modules/vuetify/lib/index.js:1
[Node] (function (exports, require, module, __filename, __dirname) { import Vuetify from './components/Vuetify';
[Node] ^^^^^^
[Node]
[Node] SyntaxError: Unexpected token import
[Node] at createScript (vm.js:80:10)
[Node] at Object.runInThisContext (vm.js:152:10)
[Node] at Module._compile (module.js:605:28)
[Node] at Object.Module._extensions..js (module.js:652:10)
[Node] at Module.load (module.js:560:32)
[Node] at tryModuleLoad (module.js:503:12)
[Node] at Function.Module._load (module.js:495:3)
[Node] at Module.require (module.js:585:17)
[Node] at require (internal/module.js:11:18)
[Node] at r (/Users/pascal/code/web/node_modules/vue-server-renderer/build.js:8341:16)
[Node] at Object.vuetify/lib (server-bundle.js:5229:18)
[Node] at __webpack_require__ (server-bundle.js:27:30)
[Node] at Module../layouts/error.vue (server-bundle.js:2394:69)
[Node] at __webpack_require__ (server-bundle.js:27:30)
[Node] at Module../.nuxt/index.js (server-bundle.js:772:76)
[Node] at __webpack_require__ (server-bundle.js:27:30)

Relevant web server part:

import * as Koa from 'koa'
import config from './helpers/config'

// We are requiring these, because of missing type declarations.
const { Nuxt, Builder } = require('nuxt')
const nuxtConfig = require('../../nuxt.config')

class NuxtHelper {
	static async init(app: Koa) {
		// Instantiate nuxt.js
		app.context.nuxt = new Nuxt(nuxtConfig)

		// Enable live build & reloading on dev
		if (app.context.nuxt.options.dev && !config.disableNuxtBuilder) {
			const builder = new Builder(app.context.nuxt)
			await builder.build()
		}
	}

	static render() {
		return async (ctx: Koa.Context, next: () => Promise<any>) => {
			await next()

			ctx.status = 200 // Koa defaults to 404 when the status is unset
			ctx.req.session = ctx.session // Bind session to req for nuxt to read.

			await new Promise((resolve, reject) => {
				ctx.res.on('close', resolve) 
				ctx.res.on('finish', resolve)

				ctx.nuxt.render(ctx.req, ctx.res, (promise: Promise<any>) => {
					promise.then(resolve).catch(reject)
				})
			})
		}
	}
}

export default NuxtHelper

Relevant part of nuxt.config.js:

// We are not using es6 module syntax here, because we are using nuxt.js programatically, requiring the nuxt.config.js as a commonjs module.

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
	dev:  (process.env.NODE_ENV !== 'production'),

	build:  {
		parallel: true,
		plugins: [
			new VuetifyLoaderPlugin(),
		],
		babel: {
			plugins: [
				["transform-imports", {
					// Enable tree shaking for vuetify components
					"vuetify": {
						transform: "vuetify/es5/components/${member}"
					}
				}]
			]
		}
	},
	...
}

I guess it is something with mixing require and import, but I don't know exactly.
Do you have any idea on how I can use the loader in this environment?

Versions and Environment

Vuetify: 1.4.3
Vue: 2.5.21
Browsers: Chrome 71.0.3578.98
OS: Mac OS 10.14.2

Steps to reproduce

I'm trying to use the vuetify-loader plugin with the vue-cli-service to create a vuetify webcomponent. The vue-cli-service instructions say you just need to point it to the .vue file, but it's not clear from vuetify-loader or the vuetify a-la-carte instructions how to get this to work.

The only way i can get it to work is to explicitly import each component in the <script> tag AND each stylus file in the <style> tag.

Simply importing app.styl in the <script> tag doesn't work. Moving only app.style to the <style> tag only includes the basic .v-btn class, i need to also add each components .styl file to get the proper styling.

I've tried using the vuetify-loader, but can't get that to work with this use case and the documentation is lacking on how it might be able to be used in this example.

Could i get some clarification on how best to create a vueitfy based web-component using the vue-cli-service command ? Should the vueitfy-loader work, if so how ? Ideally it would be great to not have to import each component and stylus file manually when using the vue-cli-service command. If there is no change to how this might be made easier for devs, it would be good to add some documentation to the a-la-carte section about this.

I've included a repo with the example i got working where i had to explicitly import everything:
https://github.com/dayre/vuetify-loader-web-component

Expected Behavior

Using vuetify-loader with vue-cli-service, NOT have to explicitly import each component AND component stylus file.

Actual Behavior

Have to explicitly import each component and component stylus file.

Reproduction Link

https://github.com/dayre/vuetify-loader-web-component

I get the following error when I try to run the bundle (created with nuxt) on the server with nuxt-start

 (node_modules/vuetify-loader/lib/plugin.js:1) 
   Error: Cannot find module 'webpack/lib/RuleSet' 

Yes, I could simply include webpack to hide this issue. But the bundle has already been built, why vuetify-loader is still being used?

Hi, I'm using a Vue Cli 3 template with Vuetify, and Vuetify loader, but when trying to use a progressive image i get the following error:

<VImg src="@/assets/img/home/mac-left.jpg" /> gives this error.
I know the location is correct, because if i change to <img src="@/assets/img/home/mac-left.jpg" /> the image works properly, so it has something to do with the loader.

Here's the vue.config.js, which should resolve to the correct webpack config.

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const { VuetifyProgressiveModule } = require('vuetify-loader');

module.exports = {
  chainWebpack:  config => {
    config.resolve.alias
      .set('vuetify/lib', 'vuetify/es5/components');
    config.plugin('vuetify-loader')
      .use(VuetifyLoaderPlugin);
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.modules = [VuetifyProgressiveModule];
        return options;
      });
    config.module
      .rule('images')
         .oneOf('progressiveImages')
              .test(/\.(png|jpe?g|gif)$/)
              .resourceQuery(/vuetify-preload/)
              .use('vuetify-loader/progressive-loader')
                  .loader('url-loader')
                  .options({ limit: 8000 })
                  .end()
              .end()
          .oneOf('progressiveImagesOther')
              .use('url-loader')
                  .loader('url-loader')
                  .options({ limit: 8000 })
                  .end()
              .end();
  },
};

I've installed both ImageMagick and GraphicsMagick, both of them return same issue.
Loader seems to be returning a base64 string, but it must be parsed incorrectly, since, strings that are returned can't be parsed to the image.

Is there something I'm missing? Could it be caused by Vue Cli 3 maybe?

due to change of casing in export directives in v 2,x installDirectives method stopped working
in vuetify 1.5.x it used to be exported like this

export default {
    ClickOutside: ClickOutside,
    Ripple: Ripple,
    Resize: Resize,
    Scroll: Scroll,
    Touch: Touch
};

in 2.0

export * from './click-outside';
export * from './resize';
export * from './ripple';
export * from './scroll';
export * from './touch';

where each of them exports in low case e.g.:

export { resize };
export default resize;

vuetify-loader breaks transitions, if class component was used.
You can see example in my repo https://github.com/Djaler/VuetifyLoaderBugSample/commits/master

I'm new to vuetify.js and was following the instructions as in the docs to set up vuetify within my vue.js based web app.

These were the steps followed:-

• Installed the vuetify package
• Configured src/main.js respectively:- (added these 3 lines)
  • import Vuetify from 'vuetify';
  • Vue.use(Vuetify);
  • import 'vuetify/dist/vuetify.min.css'

I made out a component and filled it with:-

<template>
  <v-btn color="success"></v-btn>
</template>

But the button wasn'tget rendered in the intended way. I'm confused by this instruction:- Ensure you are using css-loader

I installed css-loader as a dev-dependency still, nothing seems to change.

What am I doing wrong? Any help would be appreciated 👏

Vuetify: 1.3.1
vue: 2.5.17
vue-cli-plugin-vuetify: 0.3.0
vuetif-loader: 1.0.5
Typescript 3.0.1

Hi, I am running a Vue/Typescript/Vuetify(a la carte) project. Upgraded to Vuetify 1.3.1 . Added the Vuetify loader plugin inside vue.config.js . I am getting the following error:

Module parse failed: Identifier 'installComponents' has already been declared (29:7)
You may need an appropriate loader to handle this file type.
| 
| /* vuetify-loader */
> import installComponents from "!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js"
| import { VAlert } from 'vuetify/lib'
| installComponents(component, {

I have this example project (created with create-nuxt-app@7dd7c34, it has Nuxt 2 with CSS Extraction and Vuetify 1.3 with a-la-carte with vuetify-loader).

If you start the project on dev, the Welcome to the Vuetify + Nuxt.js template in homepage will be red, but in prod mode, it will be black. This is because the order 2 css rules are loaded in, in dev and prod is different.

Based on this comment, I tried to change the order in which vuetify components and project own components are imported in vuetify-loader, but that didn't help.

Not sure if this issue is vuetify-loader related, I saw similar discussions but couldn't find a solution. Maybe you have an idea on how to deal with this.

Hi,

I have a couple of « packages » that use vuetify as peer dependencies those packages are generally just wrapper around vuetify to simplify my use case (loader, confirm-dialog, …). Everything was great until the a-la-carte recent migration.

With the new default architecture all my externals components have the same problem :

Unknown custom element: <v-progress-circular> - did you register the component correctly?

Adding components in the target project fix the issue :

import Vuetify, {VCard, VCardText, VDialog, VProgressCircular} from 'vuetify/lib'
import loader from 'vuetify-vuejs-loader';

Vue.use(Vuetify, {
  iconfont: 'md',
  components: {VProgressCircular, VDialog, VCard, VCardText}
});
Vue.use(loader);

But its not really great because i have to track manually all my dependencies in every project who use packages.

There is a way to declare / import components automatically when Vuetify is set as peerDependencies ?

When updated to latest version i got this error from several contexts

Module parse failed: Identifier 'installComponents' has already been declared (42:7)
You may need an appropriate loader to handle this file type.
|
| /* vuetify-loader */
> import installComponents from "!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js"
| import { VBtn } from 'vuetify/lib'
| import { VCard } from 'vuetify/lib'

 @ ./src/router/index.js 10:19-12:20
 @ ./src/main.js
 @ multi ./src/main.js

Hi! Awesome update! I'm trying it out but there are a bunch of components that throw errors in the browser console with the typical message [Vue warn]: Unknown custom element: <v-breadcrumbs> - did you register the component correctly?. Only some of the components (v-breadcrumbs, v-icon, v-btn, v-stepper and some more) are not registered, everything else works fine.

I believe I've followed the instructions correctly in both vue.config.js and main.js. I import Vuetify from vuetify/lib and add the VuetifyLoaderPlugin to configureWebpack.plugins.

I'm using every component in the same way, as global components, so I don't know why some components fail and some others don't.

I also tried providing a custom matcher function to the plugin but have the same issue. If I console log every tag that the plugin processes, it prints the conflicting components as well... 😕

Might this be related to functional components?

Thanks!

Vuetify: 1.3.0
Vuetify-loader: 1.0.5

Edit: It indeed seems related to functional components, more precisely when a v-* component is the root of a custom functional component, at least using the <template functional><v-* /></template> syntax.

This two examples fail:

<template functional>
  <v-breadcrumbs>
    <v-icon slot="divider">
      chevron_right
    </v-icon>
  <v-breadcrumbs-item> ...</v-breadcrumbs-item>
</template>

<template functional>
  <component
    :is="props.button ? 'v-btn' : 'v-chip'"
    :class="[$style.chip, 'white--text', data.staticClass, data.class]"
    :color="props.getColor(props.status)"
    v-bind="data.attrs"
    text-color="white"
    round
  >
    <slot>{{ props.status }}</slot>
  </component>
</template>

I encountered a problem using data iterator with a la carte vuetify-loader. The setup is the following.

<v-data-iterator :items="this.items"
                         content-tag="v-layout"
                         :total-items="this.items.length"
                         hide-actions row wrap>
  <v-flex>
    <p>Elements</p>
    <v-layout row wrap>
      ....
    </v-layout>
  </v-flex>
</v-data-iterator>

v-data-iterator needs v-layout as it's the content-tag. It shouldn't be a problem since v-layout is already used in the slot. However I obtain the following error.

Unknown custom element: <v-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Hey 👋

nice loader! 👍

I think we could speed up the webpack build in smaller projects by only importing the required components instead of importing vuetify/lib. The latter will compile the whole vuetify library although only some of the components are actually used.

So instead of this:

  import { VCard } from 'vuetify/lib'

I wish it did:

  import { VCard } from 'vuetify/lib/components/VCard'

Do you think that would be possible? 😁

After upgrading vuetify-loader to 1.0.7 my app (using pug templates) is broken. Webpack fails with this error message:

(node:90991) UnhandledPromiseRejectionWarning: Error: Module "pug" required by "vuetify-loader" not found. Please run: npm install pug@'^2.0.0' --save
    at realRequire (/Users/ledermann/Projects/myapp/node_modules/codependency/index.js:146:9)
    at requirePeer (/Users/ledermann/Projects/myapp/node_modules/codependency/index.js:326:10)
    at Object.module.exports (/Users/ledermann/Projects/myapp/node_modules/vuetify-loader/lib/loader.js:43:21)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
(node:90991) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:90991) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

With 1.0.6 it works fine. It seems to be caused by #28.

I'm using Yarn, the packages pug and pug-plain-loader are in my devDependencies.

After editing a component while running unit:test --watch, vuetify-loader causes an UnhandledPromiseRejectionWarning, and the webpack compile/rebuild hangs.

(node:8087) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received type function
    at validateString (internal/validators.js:125:11)
    at Object.relative (path.js:1162:5)
    at JSON.stringify.splitted.map (~/loader-promise-rejection/node_modules/loader-utils/lib/stringifyRequest.js:30:29)
    at Array.map (<anonymous>)
    at Object.stringifyRequest (~/loader-promise-rejection/node_modules/loader-utils/lib/stringifyRequest.js:23:8)
    at install (~/loader-promise-rejection/node_modules/vuetify-loader/lib/loader.js:38:57)
    at Object.module.exports (~/loader-promise-rejection/node_modules/vuetify-loader/lib/loader.js:106:15)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:8087) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:8087) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Simple steps to reproduce:
vue --version
3.7.0

vue create my-app
“Manually select features”, add Unit Testing, choose “Mocha + Chai” when prompted, everything else defaults.

cd my-app
vue add vuetify

Steps to here are in https://github.com/ajhoddinott/vuetify-loader-promise-rejection.

yarn test:unit --watch

vue add vuetify has made changes to HelloWorld.vue without corresponding changes to example.spec.js, so the test fails.

Touch example.spec.js, the webpack rebuild completes and the test is run (and fails) again as expected.

Touch HelloWorld.vue, the webpack rebuild starts, but hangs/dies with the UnhandledPromiseRejectionWarning.

The Babel configuration (babel.config.js) is ignored if vuetify-loader is used.

Steps to reproduce

vue create hello-world
cd hello-world
npm run build  # --> This works
# Add a obvious error to babel.config.js, like deleting the last closing brace
npm run build  # --> This fails, as expected
vue add vuetify
npm run build  # --> This does not fail but should!

I discussed this with @johnleider in the discrod channel and he confirmed it, also mentioning that

you can test the theory by changing import Vuetify from 'vuetify/lib' in src/plugins/vuetify.js to import Vuetify from 'vuetify' and then removing vuetify-loader from packages

I have this:

import Vuetify, {VSnackbar} from "vuetify/lib"
import "vuetify/src/stylus/app.styl"

and:

Vue.use(Vuetify, {
	components: {
		VSnackbar // Imported explicitly to be compiled for the vuetify-toast-snackbar library.
	},
	iconfont: "md",
	theme: {
		primary: "blue"
	}
})

This works when running the app and building it for production, but it fails when I use the Jest framework for testing. I see that there is this issue, but the a-la-carte importing method is not used there.

My test file looks like:

import Vue from "vue"
import {shallowMount} from "@vue/test-utils"
import "@/plugins/vuetify" // This does: Vue.use(Vuetify, {...})
import {addVuetifyToast} from "@/plugins/vuetify-toast"
import App from "@/App.vue"

describe("App.vue", () => {
	addVuetifyToast(Vue)

	it("looks good", () => {
		const wrapper = shallowMount(App)
		expect(wrapper.text()).toEqual("...stuff...")
	})
})

I get a lot of these errors:

[Vue warn]: Unknown custom element: <v-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in
    
    ---> <Anonymous>
           <Root>

I'm assuming that vuetify-loader should be used somehow to build the component. There isn't any documentation on how to do that.

I couldn't figure out how to pass a custom function using vue-cli3 as described:

// webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

exports.plugins.push(
  new VuetifyLoaderPlugin({
    /**
     * This function will be called for every tag used in each vue component
     * It should return an array, the first element will be inserted into the
     * components array, the second should be a corresponding import
     *
     * originalTag - the tag as it was originally used in the template
     * kebabTag    - the tag normalised to kebab-case
     * camelTag    - the tag normalised to PascalCase
     * path        - a relative path to the current .vue file
     * component   - a parsed representation of the current component
     */
    match (originalTag, { kebabTag, camelTag, path, component }) {
      if (kebabTag.startsWith('core-')) {
        return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
      }
    }
  })
)

like:

chainWebpack: config => {
    config.module
??????
}

• vue 2.6.10
• webpack 4.19.1 (Via vue-cli)
• vuetify 1.5.7
• vuetify-loader 1.2.1
• typescript 3.3.3
• run with vue-cli-service serve

I followed this official document to try to make my existing Vue project able to lazy-load Vuetify components. However:

1. Compilation has no error message at all.
2. Most of Vuetify component are failed to load with error message Unknown custom element: <v-XXXXX> - did you register the component correctly?

This is the diff: