Mixing
Vuetify theme settings not working in Storybook
(Vue version - 2, Vuetify and Storybook - latest)
Consider the following simple button component:
<template>
<v-btn round
color="primary">
<slot></slot>
</v-btn>
</template>
<script>
export default {
name: "test-button",
}
</script>
In the App component file, it is invoked like this:
<v-app>
<v-layout column justify-center>
<v-layout row justify-center align-center>
<test-button @click="testBtnClicked">
Click It
</test-button>
</v-layout>
</v-layout>
</v-app>
And the Vuetify setup looks like this in the main.js:
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base,
info: colors.blue.lighten2,
accent: colors.green.lighten1,
error: colors.red.darken2
}
});
So far, so good - I get a nice indigo button in the middle of the frame, which is what I would expect.
Now, in the Storybook config, I'm using the same lines as in main.js to set up Vuetify, and my Storybook file looks like this:
import { storiesOf } from "@storybook/vue";
import TestButton from "./TestButton.vue";
storiesOf("TestButton", module)
.add("button template", () => ({
template: '<test-button :rounded="true">round</test-button>',
components: {TestButton}
}))
This renders the button in Storybook, but the theme settings don't happen, to wit: the button is not indigo, it is white. The rest of the Vuetify attributes seem to be fine - it looks like a Vuetify rounded button, with white text.
I'm not sure if this is a Vuetify issue or a Vue issue or a Storybook issue (or a user-error issue on my part). If anyone has done this, I'd appreciate some insight.
Here's my webpack.config.js (in .storybook):
module.exports = (baseConfig, env, defaultConfig) => {
defaultConfig.plugins.push(new VueLoaderPlugin());
return defaultConfig;
};
vuejs2 vuetify.js storybook
asked Sep 28 '18 at 23:23
rickbrickb
189112
add a comment |
(Vue version - 2, Vuetify and Storybook - latest)
Consider the following simple button component:
<template>
<v-btn round
color="primary">
<slot></slot>
</v-btn>
</template>
<script>
export default {
name: "test-button",
}
</script>
In the App component file, it is invoked like this:
<v-app>
<v-layout column justify-center>
<v-layout row justify-center align-center>
<test-button @click="testBtnClicked">
Click It
</test-button>
</v-layout>
</v-layout>
</v-app>
And the Vuetify setup looks like this in the main.js:
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base,
info: colors.blue.lighten2,
accent: colors.green.lighten1,
error: colors.red.darken2
}
});
So far, so good - I get a nice indigo button in the middle of the frame, which is what I would expect.
Now, in the Storybook config, I'm using the same lines as in main.js to set up Vuetify, and my Storybook file looks like this:
import { storiesOf } from "@storybook/vue";
import TestButton from "./TestButton.vue";
storiesOf("TestButton", module)
.add("button template", () => ({
template: '<test-button :rounded="true">round</test-button>',
components: {TestButton}
}))
This renders the button in Storybook, but the theme settings don't happen, to wit: the button is not indigo, it is white. The rest of the Vuetify attributes seem to be fine - it looks like a Vuetify rounded button, with white text.
I'm not sure if this is a Vuetify issue or a Vue issue or a Storybook issue (or a user-error issue on my part). If anyone has done this, I'd appreciate some insight.
Here's my webpack.config.js (in .storybook):
module.exports = (baseConfig, env, defaultConfig) => {
defaultConfig.plugins.push(new VueLoaderPlugin());
return defaultConfig;
};
vuejs2 vuetify.js storybook
asked Sep 28 '18 at 23:23
rickbrickb
189112
add a comment |
(Vue version - 2, Vuetify and Storybook - latest)
Consider the following simple button component:
<template>
<v-btn round
color="primary">
<slot></slot>
</v-btn>
</template>
<script>
export default {
name: "test-button",
}
</script>
In the App component file, it is invoked like this:
<v-app>
<v-layout column justify-center>
<v-layout row justify-center align-center>
<test-button @click="testBtnClicked">
Click It
</test-button>
</v-layout>
</v-layout>
</v-app>
And the Vuetify setup looks like this in the main.js:
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base,
info: colors.blue.lighten2,
accent: colors.green.lighten1,
error: colors.red.darken2
}
});
So far, so good - I get a nice indigo button in the middle of the frame, which is what I would expect.
Now, in the Storybook config, I'm using the same lines as in main.js to set up Vuetify, and my Storybook file looks like this:
import { storiesOf } from "@storybook/vue";
import TestButton from "./TestButton.vue";
storiesOf("TestButton", module)
.add("button template", () => ({
template: '<test-button :rounded="true">round</test-button>',
components: {TestButton}
}))
This renders the button in Storybook, but the theme settings don't happen, to wit: the button is not indigo, it is white. The rest of the Vuetify attributes seem to be fine - it looks like a Vuetify rounded button, with white text.
I'm not sure if this is a Vuetify issue or a Vue issue or a Storybook issue (or a user-error issue on my part). If anyone has done this, I'd appreciate some insight.
Here's my webpack.config.js (in .storybook):
module.exports = (baseConfig, env, defaultConfig) => {
defaultConfig.plugins.push(new VueLoaderPlugin());
return defaultConfig;
};
vuejs2 vuetify.js storybook
asked Sep 28 '18 at 23:23
rickbrickb
189112
(Vue version - 2, Vuetify and Storybook - latest)
Consider the following simple button component:
<template>
<v-btn round
color="primary">
<slot></slot>
</v-btn>
</template>
<script>
export default {
name: "test-button",
}
</script>
In the App component file, it is invoked like this:
<v-app>
<v-layout column justify-center>
<v-layout row justify-center align-center>
<test-button @click="testBtnClicked">
Click It
</test-button>
</v-layout>
</v-layout>
</v-app>
And the Vuetify setup looks like this in the main.js:
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base,
info: colors.blue.lighten2,
accent: colors.green.lighten1,
error: colors.red.darken2
}
});
So far, so good - I get a nice indigo button in the middle of the frame, which is what I would expect.
Now, in the Storybook config, I'm using the same lines as in main.js to set up Vuetify, and my Storybook file looks like this:
import { storiesOf } from "@storybook/vue";
import TestButton from "./TestButton.vue";
storiesOf("TestButton", module)
.add("button template", () => ({
template: '<test-button :rounded="true">round</test-button>',
components: {TestButton}
}))
This renders the button in Storybook, but the theme settings don't happen, to wit: the button is not indigo, it is white. The rest of the Vuetify attributes seem to be fine - it looks like a Vuetify rounded button, with white text.
I'm not sure if this is a Vuetify issue or a Vue issue or a Storybook issue (or a user-error issue on my part). If anyone has done this, I'd appreciate some insight.
Here's my webpack.config.js (in .storybook):
module.exports = (baseConfig, env, defaultConfig) => {
defaultConfig.plugins.push(new VueLoaderPlugin());
return defaultConfig;
};
vuejs2 vuetify.js storybook
vuejs2 vuetify.js storybook
asked Sep 28 '18 at 23:23
rickbrickb
189112
asked Sep 28 '18 at 23:23
rickbrickb
189112
edited Sep 30 '18 at 17:02
rickb
asked Sep 28 '18 at 23:23
rickbrickb
189112
asked Sep 28 '18 at 23:23
rickbrickb
189112
asked Sep 28 '18 at 23:23
rickbrickb
189112
189112
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I have the problem too.
After reading vuetify's code, seems the generation of CSS, and injection of the theme is made in the VApp mixin app-theme located here.
So, I think the problem is not linked to storybook, but vuetify instead.
By wrapping the component I wish to test with a v-app, it's ok.
So, for now, please try to add a decorator in your config.js like this :
import { configure, addDecorator } from '@storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
// your colors
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
...
Sounds ok for you ?
(answer too on github : https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)
answered Nov 19 '18 at 22:33
Mathieu D.Mathieu D.
614
Nice. Thanks for your effort. I feel like maybe I can use Storybook, now.
– rickb
Nov 21 '18 at 19:36
add a comment |
I ran into the issue a few months ago so its the not freshest in my mind. You need to import the plugin that adds Vuetify to Vue. Here is the config.js file in my .storybook folder.
//#### /.storybook/config.js
import { configure } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '@/plugins/allPlugins';
// Install Vue plugins.
Vue.use(Vuex);
const req = require.context('../src', true, /.stories.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
plugins/allPlugins
import Vue from 'vue'; // <---- important
import './vuetify'; // <---- important
import WebCam from 'vue-web-cam';
import Chat from '@/libs/vue-beautiful-chat/index';
import './styles';
import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);
plugins/vuetify
import Vue from 'vue';
import {
Vuetify,
VApp,
...
} from 'vuetify';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
components: {
VApp,
...
},
theme: {
primary: colors.blue.lighten1,
...
},
});
The reason I separated out all plugins was because of custom styles and other plugins that I was more control of when importing. If you need custom styles you will need to import both Vuetify plugin and custom styles.
answered Sep 29 '18 at 2:52
Justin KahnJustin Kahn
35819
'k, looks like the relevant thing for me is that you're using the 'a-la-carte' install. Modifying for that, I'm getting the following error: ERROR in ./node_modules/vuetify/src/stylus/components/_progress-circular.styl Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import '../bootstrap' |
– rickb
Sep 29 '18 at 19:53
Did you have to make any webpack changes/additions?
– rickb
Sep 29 '18 at 19:54
Can you post yourstoryboard/webpack.config.js?
– Justin Kahn
Sep 30 '18 at 2:32
Added in original message.
– rickb
Sep 30 '18 at 17:03
I've gone ahead and entered an issue with the Storybook folks here: github.com/storybooks/storybook/issues/4256. See if they have anything to say about it.
– rickb
Sep 30 '18 at 17:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52563713%2fvuetify-theme-settings-not-working-in-storybook%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I have the problem too.
After reading vuetify's code, seems the generation of CSS, and injection of the theme is made in the VApp mixin app-theme located here.
So, I think the problem is not linked to storybook, but vuetify instead.
By wrapping the component I wish to test with a v-app, it's ok.
So, for now, please try to add a decorator in your config.js like this :
import { configure, addDecorator } from '@storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
// your colors
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
...
Sounds ok for you ?
(answer too on github : https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)
answered Nov 19 '18 at 22:33
Mathieu D.Mathieu D.
614
Nice. Thanks for your effort. I feel like maybe I can use Storybook, now.
– rickb
Nov 21 '18 at 19:36
add a comment |
I have the problem too.
After reading vuetify's code, seems the generation of CSS, and injection of the theme is made in the VApp mixin app-theme located here.
So, I think the problem is not linked to storybook, but vuetify instead.
By wrapping the component I wish to test with a v-app, it's ok.
So, for now, please try to add a decorator in your config.js like this :
import { configure, addDecorator } from '@storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
// your colors
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
...
Sounds ok for you ?
(answer too on github : https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)
answered Nov 19 '18 at 22:33
Mathieu D.Mathieu D.
614
Nice. Thanks for your effort. I feel like maybe I can use Storybook, now.
– rickb
Nov 21 '18 at 19:36
add a comment |
I have the problem too.
After reading vuetify's code, seems the generation of CSS, and injection of the theme is made in the VApp mixin app-theme located here.
So, I think the problem is not linked to storybook, but vuetify instead.
By wrapping the component I wish to test with a v-app, it's ok.
So, for now, please try to add a decorator in your config.js like this :
import { configure, addDecorator } from '@storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
// your colors
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
...
Sounds ok for you ?
(answer too on github : https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)
answered Nov 19 '18 at 22:33
Mathieu D.Mathieu D.
614
I have the problem too.
After reading vuetify's code, seems the generation of CSS, and injection of the theme is made in the VApp mixin app-theme located here.
So, I think the problem is not linked to storybook, but vuetify instead.
By wrapping the component I wish to test with a v-app, it's ok.
So, for now, please try to add a decorator in your config.js like this :
import { configure, addDecorator } from '@storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
// your colors
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
...
Sounds ok for you ?
(answer too on github : https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)
answered Nov 19 '18 at 22:33
Mathieu D.Mathieu D.
614
answered Nov 19 '18 at 22:33
Mathieu D.Mathieu D.
614
answered Nov 19 '18 at 22:33
Mathieu D.Mathieu D.
614
answered Nov 19 '18 at 22:33
Mathieu D.Mathieu D.
614
614
Nice. Thanks for your effort. I feel like maybe I can use Storybook, now.
– rickb
Nov 21 '18 at 19:36
add a comment |
Nice. Thanks for your effort. I feel like maybe I can use Storybook, now.
– rickb
Nov 21 '18 at 19:36
Nice. Thanks for your effort. I feel like maybe I can use Storybook, now.
– rickb
Nov 21 '18 at 19:36
Nice. Thanks for your effort. I feel like maybe I can use Storybook, now.
– rickb
Nov 21 '18 at 19:36
add a comment |
I ran into the issue a few months ago so its the not freshest in my mind. You need to import the plugin that adds Vuetify to Vue. Here is the config.js file in my .storybook folder.
//#### /.storybook/config.js
import { configure } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '@/plugins/allPlugins';
// Install Vue plugins.
Vue.use(Vuex);
const req = require.context('../src', true, /.stories.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
plugins/allPlugins
import Vue from 'vue'; // <---- important
import './vuetify'; // <---- important
import WebCam from 'vue-web-cam';
import Chat from '@/libs/vue-beautiful-chat/index';
import './styles';
import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);
plugins/vuetify
import Vue from 'vue';
import {
Vuetify,
VApp,
...
} from 'vuetify';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
components: {
VApp,
...
},
theme: {
primary: colors.blue.lighten1,
...
},
});
The reason I separated out all plugins was because of custom styles and other plugins that I was more control of when importing. If you need custom styles you will need to import both Vuetify plugin and custom styles.
answered Sep 29 '18 at 2:52
Justin KahnJustin Kahn
35819
'k, looks like the relevant thing for me is that you're using the 'a-la-carte' install. Modifying for that, I'm getting the following error: ERROR in ./node_modules/vuetify/src/stylus/components/_progress-circular.styl Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import '../bootstrap' |
– rickb
Sep 29 '18 at 19:53
Did you have to make any webpack changes/additions?
– rickb
Sep 29 '18 at 19:54
Can you post yourstoryboard/webpack.config.js?
– Justin Kahn
Sep 30 '18 at 2:32
Added in original message.
– rickb
Sep 30 '18 at 17:03
I've gone ahead and entered an issue with the Storybook folks here: github.com/storybooks/storybook/issues/4256. See if they have anything to say about it.
– rickb
Sep 30 '18 at 17:04
add a comment |
I ran into the issue a few months ago so its the not freshest in my mind. You need to import the plugin that adds Vuetify to Vue. Here is the config.js file in my .storybook folder.
//#### /.storybook/config.js
import { configure } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '@/plugins/allPlugins';
// Install Vue plugins.
Vue.use(Vuex);
const req = require.context('../src', true, /.stories.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
plugins/allPlugins
import Vue from 'vue'; // <---- important
import './vuetify'; // <---- important
import WebCam from 'vue-web-cam';
import Chat from '@/libs/vue-beautiful-chat/index';
import './styles';
import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);
plugins/vuetify
import Vue from 'vue';
import {
Vuetify,
VApp,
...
} from 'vuetify';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
components: {
VApp,
...
},
theme: {
primary: colors.blue.lighten1,
...
},
});
The reason I separated out all plugins was because of custom styles and other plugins that I was more control of when importing. If you need custom styles you will need to import both Vuetify plugin and custom styles.
answered Sep 29 '18 at 2:52
Justin KahnJustin Kahn
35819
'k, looks like the relevant thing for me is that you're using the 'a-la-carte' install. Modifying for that, I'm getting the following error: ERROR in ./node_modules/vuetify/src/stylus/components/_progress-circular.styl Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import '../bootstrap' |
– rickb
Sep 29 '18 at 19:53
Did you have to make any webpack changes/additions?
– rickb
Sep 29 '18 at 19:54
Can you post yourstoryboard/webpack.config.js?
– Justin Kahn
Sep 30 '18 at 2:32
Added in original message.
– rickb
Sep 30 '18 at 17:03
I've gone ahead and entered an issue with the Storybook folks here: github.com/storybooks/storybook/issues/4256. See if they have anything to say about it.
– rickb
Sep 30 '18 at 17:04
add a comment |
I ran into the issue a few months ago so its the not freshest in my mind. You need to import the plugin that adds Vuetify to Vue. Here is the config.js file in my .storybook folder.
//#### /.storybook/config.js
import { configure } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '@/plugins/allPlugins';
// Install Vue plugins.
Vue.use(Vuex);
const req = require.context('../src', true, /.stories.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
plugins/allPlugins
import Vue from 'vue'; // <---- important
import './vuetify'; // <---- important
import WebCam from 'vue-web-cam';
import Chat from '@/libs/vue-beautiful-chat/index';
import './styles';
import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);
plugins/vuetify
import Vue from 'vue';
import {
Vuetify,
VApp,
...
} from 'vuetify';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
components: {
VApp,
...
},
theme: {
primary: colors.blue.lighten1,
...
},
});
The reason I separated out all plugins was because of custom styles and other plugins that I was more control of when importing. If you need custom styles you will need to import both Vuetify plugin and custom styles.
answered Sep 29 '18 at 2:52
Justin KahnJustin Kahn
35819
I ran into the issue a few months ago so its the not freshest in my mind. You need to import the plugin that adds Vuetify to Vue. Here is the config.js file in my .storybook folder.
//#### /.storybook/config.js
import { configure } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '@/plugins/allPlugins';
// Install Vue plugins.
Vue.use(Vuex);
const req = require.context('../src', true, /.stories.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
plugins/allPlugins
import Vue from 'vue'; // <---- important
import './vuetify'; // <---- important
import WebCam from 'vue-web-cam';
import Chat from '@/libs/vue-beautiful-chat/index';
import './styles';
import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);
plugins/vuetify
import Vue from 'vue';
import {
Vuetify,
VApp,
...
} from 'vuetify';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
components: {
VApp,
...
},
theme: {
primary: colors.blue.lighten1,
...
},
});
The reason I separated out all plugins was because of custom styles and other plugins that I was more control of when importing. If you need custom styles you will need to import both Vuetify plugin and custom styles.
answered Sep 29 '18 at 2:52
Justin KahnJustin Kahn
35819
answered Sep 29 '18 at 2:52
Justin KahnJustin Kahn
35819
answered Sep 29 '18 at 2:52
Justin KahnJustin Kahn
35819
answered Sep 29 '18 at 2:52
Justin KahnJustin Kahn
35819
35819
'k, looks like the relevant thing for me is that you're using the 'a-la-carte' install. Modifying for that, I'm getting the following error: ERROR in ./node_modules/vuetify/src/stylus/components/_progress-circular.styl Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import '../bootstrap' |
– rickb
Sep 29 '18 at 19:53
Did you have to make any webpack changes/additions?
– rickb
Sep 29 '18 at 19:54
Can you post yourstoryboard/webpack.config.js?
– Justin Kahn
Sep 30 '18 at 2:32
Added in original message.
– rickb
Sep 30 '18 at 17:03
I've gone ahead and entered an issue with the Storybook folks here: github.com/storybooks/storybook/issues/4256. See if they have anything to say about it.
– rickb
Sep 30 '18 at 17:04
add a comment |
'k, looks like the relevant thing for me is that you're using the 'a-la-carte' install. Modifying for that, I'm getting the following error: ERROR in ./node_modules/vuetify/src/stylus/components/_progress-circular.styl Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import '../bootstrap' |
– rickb
Sep 29 '18 at 19:53
Did you have to make any webpack changes/additions?
– rickb
Sep 29 '18 at 19:54
Can you post yourstoryboard/webpack.config.js?
– Justin Kahn
Sep 30 '18 at 2:32
Added in original message.
– rickb
Sep 30 '18 at 17:03
I've gone ahead and entered an issue with the Storybook folks here: github.com/storybooks/storybook/issues/4256. See if they have anything to say about it.
– rickb
Sep 30 '18 at 17:04
'k, looks like the relevant thing for me is that you're using the 'a-la-carte' install. Modifying for that, I'm getting the following error: ERROR in ./node_modules/vuetify/src/stylus/components/_progress-circular.styl Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import '../bootstrap' |
– rickb
Sep 29 '18 at 19:53
'k, looks like the relevant thing for me is that you're using the 'a-la-carte' install. Modifying for that, I'm getting the following error: ERROR in ./node_modules/vuetify/src/stylus/components/_progress-circular.styl Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import '../bootstrap' |
– rickb
Sep 29 '18 at 19:53
Did you have to make any webpack changes/additions?
– rickb
Sep 29 '18 at 19:54
Did you have to make any webpack changes/additions?
– rickb
Sep 29 '18 at 19:54
Can you post your
storyboard/webpack.config.js?– Justin Kahn
Sep 30 '18 at 2:32
Can you post your
storyboard/webpack.config.js?– Justin Kahn
Sep 30 '18 at 2:32
Added in original message.
– rickb
Sep 30 '18 at 17:03
Added in original message.
– rickb
Sep 30 '18 at 17:03
I've gone ahead and entered an issue with the Storybook folks here: github.com/storybooks/storybook/issues/4256. See if they have anything to say about it.
– rickb
Sep 30 '18 at 17:04
I've gone ahead and entered an issue with the Storybook folks here: github.com/storybooks/storybook/issues/4256. See if they have anything to say about it.
– rickb
Sep 30 '18 at 17:04
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52563713%2fvuetify-theme-settings-not-working-in-storybook%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
