I am creating extension for chrome, using VUE2, i have a problem to creating and mounting shadow element, this is what my main.js file looks like, i want to create shadow element with id templates and also give it some css class, but when i check templates element is not created? any solution?
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import CKEditor from '#ckeditor/ckeditor5-vue2';
import router from "./router/router"
Vue.use(VueRouter)
Vue.use(router)
Vue.use(CKEditor)
const shadowElement = document.createElement('div');
shadowElement.setAttribute("id", "templates");
shadowElement.style.display = "hidden";
// shadowElement.attachShadow({ mode: 'open' });
document.body.appendChild(shadowElement);
new Vue({
router,
render: h => h(App),
}).$mount('#templates')
Related
I have a Vue2 application that is utilizing Vuetify.
I've noticed that, when using the material design icons, the application is reaching out to a CDN to retrieve those icons which causes render blocking issues.
I've followed the documentation here to install locally, but I can still see the CDN being accessed in the network tab of my browser inspector.
I used the vue cli to generate the app so I am unfamiliar with using webpack to reference css-loader. My config is listed below:
// /src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import store from './store'
Vue.config.productionTip = false
new Vue({
vuetify,
store,
render: h => h(App)
}).$mount('#app')
// /src/plugins/vuetify.js
import '#mdi/font/css/materialdesignicons.min.css'
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
});
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
]
})
I am new for vuejs. I tried to create a calendar app with vue and vuetify, but got tons of error on console as blow photo:
I think they are from the same issue which I missed some config for vuetify. However, I tried to use the method I search from Google, like add "import "vuetify/dist/vuetify.min.css";" and "Vue.use(Vuetify);". They are not working well.
This is vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "mdi",
},
});
main.js
import Vue from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
vuetify,
render: (h) => h(App),
}).$mount("#app");
The Vuetify docs explain how to set this up with webpack, which is what it looks like you're using.
src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Your main.js is fine.
Alternatively, if you have the Vue CLI installed, then you can simply run:
vue add vuetify
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.
I have an issue I looked everywhere but not found suitable solution.
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> at src/App.vue
import Vue from 'vue'
import App from './App.vue'
import Generic from './Generic.vue' import ABC from './abc.vue' import ueRouter from 'vue-router' import { routes } from './router.js'
Vue.component('vue-header', Header); Vue.component('vue-generic', eneric); Vue.component('vue-abc', ABC);
Vue.use('VueRouter');
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({ el: '#app', routes, render: h => h(App) })
Thanks in advance
Don't call Vue.use() on a string. So, instead of having Vue.use('VueRouter') as in:
import VueRouter from 'vue-router';
Vue.use('VueRouter'); // don't call .use() on a string
Call Vue.use() on the previously imported reference (e.g. Vue.use(VueRouter)) as in:
import VueRouter from 'vue-router';
Vue.use(VueRouter); // call .use() on the imported reference
I cannot figure out how to set this up properly using vue-router with vue.js 2.x
I want App.vue to be a main site layout module which contains basic site level things like footer, logo, main nav, etc.
A route based architecture which will load components based on the route inside this App.vue
ie: /things to show list and /things/:id to show individual item
I'm using the webpack template from vue-cli
I'm confused about main.js vs. App.vue should I be moving the routes out of main.js into App.vue?
Can someone link to a simple hello world using layouts in vue-router?
import Vue from 'vue'
import App from './App'
import Items from './components/Items'
import Item from './components/Item'
import Axios from 'axios'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.prototype.$http = Axios
const routers = new VueRouter([
{ path: '/items/:id', component: Item },
{ path: '/', component: Items }
])
// how to specify App.vue as a layout?
new Vue({
routes
}).$mount('#app')
I think this should work for you
const app = new Vue({
router,
render: (h) => h(App)
}).$mount('#app')
or spread operator
const app = new Vue({
router,
...App
}).$mount('#app')
As I mentioned in comment, take look at the repo that I created https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app
I had wrong property name:
new Vue({
router,
...App
}).$mount('#app')
This fixes it. I had imported it as routes not router. Another way to fix would have been { router: routes } but I renamed the file to router and now everything works.
Big thanks to #belmin for hoping on screenhero to try and help me fix it!