# Sage 10 + Bud + Vue 3 + Vuetify 3

**URL:** https://discourse.roots.io/t/sage-10-bud-vue-3-vuetify-3/24626
**Category:** bud
**Tags:** vue, sage10
**Created:** 2023-01-24T00:41:15Z
**Posts:** 2

## Post 1 by @RistoKaalma — 2023-01-24T00:41:16Z

Hi!

It seems I have reached a dead end while trying to get **Sage 10** (`v10.4.0`) + **Vue 3** (`@roots/bud-vue@6.6.9`) + **Vuetify 3** (`vuetify@3.1.2`) to work with **Bud** (`@roots/bud@6.6.9`).

Vue itself was working fine. I then followed [Get started with Vuetify 3 — Vuetify](https://next.vuetifyjs.com/en/getting-started/installation/) manual installation steps:

 ![image](https://discourse.roots.io/uploads/default/original/2X/d/d2619c84ac464ecae020bcec84560e8ca446c319.png)

Now `yarn bud build` is resulting:

 ![image](https://discourse.roots.io/uploads/default/original/2X/3/30af04c6257ea75c314780f3587644c307afa95c.png)

`@roots/bud-vue` documentation states:

> Once installed, vue should be ready to use in your project. The extension is pre-configured to support Vue 3 single file components (runtime only).

`@roots/bud-sass` documentation states:

> After installation, sass will automatically preprocess any `.scss` or `.sass` modules in your project with sass.

My errors are all related to:

> ├─ ✘ error  
> │ Module parse failed: Unexpected token (1:0)  
> │ **You may need an appropriate loader to handle this file type, currently**  
> │ **no loaders are configured to process this file.** See [https://webpack.js.org/concepts#loaders](https://webpack.js.org/concepts#loaders)  
> │ \> .v-tooltip .v-overlay\_\_content {  
> │ | background: rgba(var(–v-theme-surface-variant), 0.7);  
> │ | color: rgb(var(–v-theme-on-surface-variant));

I searched the Vuetify 3 package for an actual file that these errors could be related to and it seems that the issue is originating from `.css` or `.sass` files not being recognized (?), examples:

 ![image](https://discourse.roots.io/uploads/default/original/2X/6/6d5e01c96ab7b1f084c762ba3d76de9ccb94e6f4.png)

… or …

 ![image](https://discourse.roots.io/uploads/default/original/2X/1/1e733027d8784c65e7cb528a44f0ef8ea1bba6ea.png)

I’ve tried many things and at this point it seems I’m in need for a bigger (or someone else’s) brain to tackle the situation. I’m not sure what would be the correct way proceed - I generally think I should try to write some rules with `app.build.setRule()` relating to `sass-loader` and/or `vue-loader` and/or _something_ else… but didn’t get anywhere with the initial attempts.

Any ideas, suggestions?

---

## Post 2 by @system — 2023-01-24T01:13:46Z

You used a screenshot instead of pasting your code, error, etc. Screenshots prevent folks from being able to copy and run/test your code, make posts less searchable for other people with the same problem, and prevent assistive technologies like screen readers from working.

Please replace the screenshot used here with copied text, and avoid using screenshots in the future unless you are trying to debug something _visual_.