I need to add Vuetify Data Table to my existing Vuejs project. So when we add vue add vuetify its installed globally. Please help me for that how doing it
Thanks
You can import the dataTable component alone.
You can do this in a vuetify.js file:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify, {
VDataTable,
} from 'vuetify/lib'
Vue.use(Vuetify, {
components: {
VDataTable,
},
})
const opts = {}
export default new Vuetify(opts)
and in your main.js import this file: import vuetify from #/src/plugins/vuetify.js
or you can import it in the component you need it:
<!-- Vue Component -->
<template>
<v-card>
<v-card-title>...</v-card-title>
<v-card-text>...</v-card-text>
</v-card>
</template>
<script>
import { VDataTable } from 'vuetify/lib'
export default {
components: {
VDataTable,
}
}
</script>
you can read more about this in vuetify docs
Related
I am moving my project dependencies from Vue CLI to Vite. I have to use Vue.js 2.7 at the moment and I cannot upgrade to Vue.js 3 yet.
I used vue-svg-loader with Vue CLI previously and I am trying to use vite-svg-loader now. It looks like vite-svg-loader supports Vue.js 3 only.
Is there a different way to import SVG files with Vite & Vue.js 2.7? I have many of them and I will not be able to replace them with .vue components.
This is how I import and use SVG files in my components:
<template>
<div>
<my-icon/>
</div>
</template>
<script>
import MyIcon from "#some_path/my-icon.svg";
export default {
components: {
MyIcon
}
};
</script>
Vite doesn't treat these SVG files as Vue components. Instead, it treats them as static assets and creates something like assets/my-icon.7f263221.svg.
I've encountered the same problem, https://www.npmjs.com/package/vite-plugin-vue2-svg
// vite.config.ts
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2"; // vue2 plugin
import { createSvgPlugin } from "vite-plugin-vue2-svg";
export default defineConfig({
plugins: [createVuePlugin(), createSvgPlugin()],
});
<!-- App.vue -->
<template>
<Icon />
</template>
<script>
import Icon from "./icon.svg";
export default {
components: {
Icon,
},
};
</script>
I've recently upgraded from Vuetify 1.5 to Vuetify 2.0 and I'm having trouble getting it to work. I feel like I'm missing something.
I downloaded the newest Vuetify package and the #mdi/font package as well. I've followed the instructions in the docs, as far as I can tell: I've added the plugins folder with the vuetify.js file, and as far as I can tell, I've instantiated Vuetify into my Main.js file properly, but none of the stylings appear in my app. I've also tried adding a element tag to my project in various places (my App.vue file and various other page files), but all that seems to do is break things even more; I either get an element to appear on the DOM with no stylings, or the DOM comes up completely white.
Here is my vuetify.js file:
import Vue from "vue";
import Vuetify from "vuetify";
import "#mdi/font/css/materialdesignicons.css";
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "mdi"
}
});
Here is my main.js file:
import Vue from "vue";
import App from "./App.vue";
import router from "./Router";
import Vuetify from "#/plugins/vuetify";
import 'vuetify/dist/vuetify.min.css'
Vue.config.productionTip = false;
new Vue({
router,
Vuetify,
render: h => h(App)
}).$mount("#app");
Here is my App.vue file:
<template>
<div id="app">
<Header />
<router-view></router-view>
<Footer />
</div>
</template>
<script>
import Header from "./components/Layout/Header";
import Home from "./components/Home";
import InstructorProfile from "./components/InstructorProfile";
import ClassRoster from "./components/ClassRoster";
import Footer from "./components/Layout/Footer";
export default {
name: "app",
components: {
Header,
Home,
InstructorProfile,
ClassRoster,
Footer
},
data() {
return {};
}
};
</script>
As I mentioned before, I have tried adding elements to this file, both like this:
<v-app>
<div id="app">...</div>
</v-app>
And like this:
<div id="app">
<v-app>...</v-app>
</div>
But neither seemed to work better than the other.
I'd like to know if there's something I've left out or I've done wrong.
Any help is much appreciated. Thank you in advance.
try with this:
In vuetify.js file:
import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css"; // Add this line
Vue.use(Vuetify);
const opts = {
theme: {
dark: false
},
options: {
customProperties: true
},
icons: {
iconfont: "mdi"
}
};
export default new Vuetify(opts);
In main.js file:
import Vue from "vue";
import App from "./App.vue";
import router from "#/router";
import vuetify from "#/plugins/vuetify";
Vue.config.productionTip = false;
new Vue({
vuetify,
router,
render: h => h(App)
}).$mount("#app");
I do it this way (vue 3.9, vuetify 2.0)
In main.js
import vuetify from './plugins/vuetify'
...
new Vue({
...
vuetify,
render: h => h(App)
}).$mount('#app')
In plugins/vuetify.js
import Vue from "vue"
import Vuetify from "vuetify/lib"
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'md', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
},
theme: {
dark: false,
},
themes: {
light: {
primary: "#4682b4",
secondary: "#b0bec5",
accent: "#8c9eff",
error: "#b71c1c",
},
},
})
in App.vue
<template>
<v-app>
...
</v-app>
</template>
I fixed with
npm install vuetify-loader vue-cli-plugin-vuetify -D
https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#questions
I just had to run: vue add vuetify.
From the docs for Vuetify 3
Follow these steps if for example you are adding Vuetify to an existing project, or simply do not want to use a scaffolding tool.
yarn add vuetify#^3.0.0
In the file where you create the Vue application, add the following code
import { createApp } from 'vue'
import App from './App.vue'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createApp(App).use(vuetify).mount('#app')
See the docs for more info.
I'm building a web component using the following command :
vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'
I would like to use Vuetify inside of this component. How do I add it to mycomponent.vue so that it is scoped inside the component's shadow root?
This component will be dynamically loaded into apps built with other frameworks/styles. I want the web component to be able to use, for example, v-btn, v-layout, etc. within it.
Thank you,
Donnie
For vuetify 2.x, it requires initialization on Vue instance as follows.
// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);
// main.js
import Vue from 'vue';
import App from './app.vue';
import vuetify from './plugins/vuetify';
new Vue({
vuetify,
render: h => h(App),
}).$mount('#app');
You need to move such initialization into your web component instead.
<template>
...
</template>
<script>
import { VBtn, VLayout } from 'vuetify/lib'
import vuetify from '../plugins/vuetify';
export default {
name: 'MyWebComponent',
vuetify,
components: {
VBtn,
VLayout
},
...
}
</script>
<style>
...
</style>
From v1.3, you can import individual components, A La Carte...
<template>
<!-- whatever -->
</template>
<script>
import { VBtn, VLayout } from 'vuetify/lib'
export default {
name: 'MyElement',
components {
VBtn,
VLayout
},
// etc
}
</script>
See https://vuetifyjs.com/en/framework/a-la-carte#importing-components
I'm new to Vue, can't find the exact answer how to use FA SVG icons in v-icon and prepend-icon.
If i use:
<font-awesome-icon :icon="dekstop" color="gray"></font-awesome-icon>
Icons are displayed, but how i can use FA SVG icons in v-icon and prepend-icon?
Sample:
<v-autocomplete v-model="replUser"
:items="users"
color="accent white--text"
label="User"
prepend-icon="dekstop></i>" // i can use material font icons here, but FA SVG not worked
>
</v-autocomplete>
my main.js:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
// import colors from 'vuetify/es5/util/colors'
import './plugins/vuetify'
import App from './App.vue'
import i18n from './i18n'
import {
library
} from '#fortawesome/fontawesome-svg-core'
import {
FontAwesomeIcon
} from '#fortawesome/vue-fontawesome'
import {
fas
} from '#fortawesome/free-solid-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons.
Vue.use(Vuetify, {
iconfont: 'faSvg',
})
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
What am I doing wrong?
If you want to use svg icons in v-icon/prepend-icon, then you need to access them through $vuetify.icons object. Any other text in the v-icon/prepend-icon will be interpreted as webfont/css class.
But for use $vuetify.icons object you should register custom icons. Example:
import Vue from "vue";
import Vuetify from "vuetify";
import { library } from "#fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
import { faVuejs } from "#fortawesome/free-brands-svg-icons";
Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(faVuejs); // Include needed icons.
Vue.use(Vuetify, {
icons: {
vue: {
component: FontAwesomeIcon,
props: {
icon: ["fab", "vuejs"]
}
}
}
});
And now you can use vue-brand icon:
<v-icon>$vuetify.icons.vue</v-icon>
<v-text-field prepend-icon="$vuetify.icons.vue"/>
Also, you can use without register via font-awesome-icon:
<font-awesome-icon :icon="['fab', 'vuejs']" />
<v-text-field>
<font-awesome-icon :icon="['fab', 'vuejs']" slot="prepend"/>
</v-text-field>
Out of the box vuetify has a preset of icons config that can be associated with SVG:
...
import { fas } from "#fortawesome/free-solid-svg-icons";
...
library.add(fas);
...
Vue.use(Vuetify, {
iconfont: "faSvg"
});
But for use it you should call $vuetify.icons again (vuetify just wrap preset as component):
<v-icon>$vuetify.icons.warning</v-icon>
Full example codesandbox
From Vuetify documention:
Font Awesome is also supported. Simply use the fa- prefixed icon name.
Please note that you still need to include the Font Awesome icons in
your project.
Maybe it helps you. But, without your sample code I can't be sure
<v-autocomplete v-model="replUser"
:items="users"
color="accent white--text"
label="User"
prepend-icon="fa-dekstop">
</v-autocomplete>
(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;
};
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)
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.