I have the following code...
import Vue from 'vue';
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import App from './app/App.vue';
Vue.use(VueMaterial)
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
But when I try to use the drawer like this...
<md-table>
<md-table-row>
<md-table-head md-numeric>ID</md-table-head>
<md-table-head>Name</md-table-head>
<md-table-head>Email</md-table-head>
<md-table-head>Gender</md-table-head>
<md-table-head>Job Title</md-table-head>
</md-table-row>
</md-table>
I get...
Unknown custom element: <md-table> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
And nothing renders.
Related
I'm learning Vue.js 2.6.Here is my basic directory:
I need my home and blogs shares the same header and footer, so I imported my header and footer components separately in my home.vue and blogs.vue, but It didn't switch page smoothly when I click the link in the navigation bar. What can I do to make it smooth?
To make this project I turned to some case on the internet, after that I was confused when I saw its Router file structure:
It seems that I'm coding it as a MPA, but why is that index.js in Routers dir needed?
my home.js as below:
import Vue from 'vue'
import Home from './home.vue'
import router from '../../router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
el: '#homeDiv',
router,
components: { Home },
template: '<Home/>',
render:h => h(Home)
});
my index.js in Router dir as below:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from 'HelloWorld'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'App',
component: HelloWorld
}
]
})
and there's another main.js in the root of src dir, the author of that sample code did nothing to the initial App.vue and main.js. I just added some element-ui related code into index.js and main.js.
main.js:
import Vue from 'vue';
import App from './App';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//import './plugins/element.js'
Vue.config.productionTip = false;
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
new Vue({
el: '#app',
render:h => h(App)
})
I felt its Router looks like spaghetti, I can't see which code is needed, which is not. What is a GOOD Router structure in a vue.js MPA project?
THX
You have multiple questions being asked here.
What is the best router structure for vue-router?
I don't think there is a standard anywhere. A lot of codes I have seen adopted the style you have already. Which is fine depending on the scale of what you are building.
How to make a smooth transition between pages?
In my projects, I wrap the router-view component in the official vue transition component. As advised here in the official vue router documentation
Please let me know if these answers suffice.
Hey I have a problem with importing vuetify into my project...
What am I doing wrong?
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
app.js:
import Vue from "vue";
import Vuetify from "./plugins/vuetify";
import store from "~/store";
import router from "~/router";
import App from "~/components/App";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
store,
router,
Vuetify,
...App
});
App.vue:
<template>
<v-app>
<loading ref="loading" />
<router-view />
</v-app>
</template>
<script>
import Loading from "./Loading";
export default {
el: "#app",
components: {
Loading
}
};
</script>
<style>
</style>
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"
}
}
});
Had the same issue which has bugged my head for like an hour now, how this worked I don't know either: but this is what I changed when importing vuetify in vuetify.js
changed:
import Vuetify from 'vuetify/lib'
replaced it with:
import Vuetify from 'vuetify'
Note: this could be a laravel issue only because the official vuetify documentation has the first form.
got that project created with vue-cli v3? You either need to register components yourself or have a vuetify loader added, that parses your components and generates that list itself. the respective docu you can find here https://vuetifyjs.com/en/customization/a-la-carte#vuetify-loader
To add Vuetify to existing project you should follow the below procedure
In your project folder run,
npm install vuetify --save
In your app.js
import Vuetify from 'vuetify/lib'
// To add vuetify css file
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify({ ... })
To finish, you need to add a v-app component that wrap your entire application in order to make Vuetify works.
<v-app id="app">
<router-view/>
</v-app>
Change
new Vue({
store,
router,
Vuetify,
...App
});
To
store,
router,
vuetify: Vuetify,
...App
});
Step 1: Install Vuetify in your Project using "vue add vuetify" command
Step 2: In main.js write following code
import vuetify from './plugins/vuetify'; //plugins folder installed when you add vuetify
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');
Step 3: Restart your Project because whenever you changed in main.js file then you need to restart your Project.
Docs at https://vuetifyjs.com/en/getting-started/unit-testing/#testing-efficiency suggest to create an instance pass it to mount.
beforeEach(() => {
vuetify = new Vuetify()
})
const wrapper = mount(CustomCard, {
localVue,
vuetify
})
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 am using vue-form-generator and trying to get it to render a simple form without success. I am going to re-use this generator in dozens of files as my application is form heavy and would like to make this global and I'll just manage everything in components.
main.js file
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";
Vue.use("VueFormGenerator", VueFormGenerator);
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
I have a larger template that uses this template for most of the page, this is the template file where I am trying to use VueFormGenerator
NewTrade.vue
<template>
<div>
<p class="introText">Please try to stick to your strategy and use the Manual mode as little as possible if at all! </p>
<form action="#">
<VueFormGenerator
:schema="schema"
:model="model"
/>
</form>
</div>
</template>
<script>
export default {
data() {
return {
model: {
name: "David Johnson"
},
schema: {
fields: [
{
name: "text"
}
]
}
}
}
}
</script>
This is the error I get in Chrome.
[Vue warn]: Unknown custom element: <VueFormGenerator> - did you register
the component correctly? For recursive components, make sure to provide the
"name" option.
found in
---> <NewTrade> at src/components/NewTrade.vue
<Trading> at src/components/Trading.vue
<App> at src/App.vue
<Root>
just use component instead of use
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";
Vue.component("VueFormGenerator ", VueFormGenerator); // <-- component instead of use
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Usually you'd use vue-form-generator instead of VueFormGenerator as the component name here and in template, as that's the convention, but you only need that when you compile run-time.
here is a working example: https://codesandbox.io/s/o77lmqq9v6
Here's my code (ERROR):
<template lang="pug">
.component-root
b-btn(v-b-modal.myModal)
i.fa.fa-calendar
b-modal#myModal
span Hello this is my modal!
</template>
it outputs an error message:
[Vue warn]: Property or method "v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
When I use $refs method to create modal, it works :
<template lang="pug">
b-button(#click="showModal")
i.fa.fa-calendar
b-modal(ref="myModalRef" hide-footer title="some title")
span Hello form my modal
</template>
<script>
...
methods: {
showModal() {
this.$refs.myModalRef.show();
},
}
...
</script>
Here's my main App.js with BootstrapVue installed
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'font-awesome/css/font-awesome.min.css';
import Vue from 'vue';
import Moment from 'vue-moment';
import BootstrapVue from 'bootstrap-vue';
import DatePicker from 'vue2-datepicker';
import './assets/bootstrap.cosmo.min.css';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(Moment);
Vue.use(DatePicker);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
I just following the manual here: https://bootstrap-vue.js.org/docs/components/modal/
So far I have problem until I want to show some modal.
What's wrong with me?
The problem is pug. In:
<template lang="pug">
.component-root
b-btn(v-b-modal.myModal)
i.fa.fa-calendar
b-modal#myModal
span Hello this is my modal!
</template>
The line:
b-btn(v-b-modal.myModal)
Messes things up. Use:
b-btn(v-b-modal.myModal="")
Reason:
b-btn(v-b-modal.myModal) creates <b-btn v-b-modal.myModal="v-b-modal.myModal">, which makes Vue search for that falue. Using b-btn(v-b-modal.myModal="") creates <b-btn v-b-modal.myModal=""> which solves the problem.
More: https://github.com/pugjs/pug/issues/370#issuecomment-2399051