I'm trying to follow that link, and implement it on VueCli webpack template..
Then i go to dev-server.js and create * route, to return as that link:
renderer.renderToString(require('./src/main'), function (err, html){
//code here
})
But that require keeps giving me error, that was not possible to load.
Here it's my main js:
import Vue from 'vue'
import App from './App'
const app = new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
If someone can help, i'll appreciate!
Related
I have 1 component called calculator.vue and in my main.js I have the code for the plugin, like below:
import App from './App.vue'
import vuetify from './plugins/vuetify'
import "./plugins/vuetify-money.js"
import VueMeta from 'vue-meta'
import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, {
id: 'My UA',
disableScriptLoader: true
})
Vue.use(VueMeta);
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')```
As told here: https://github.com/MatteoGabriele/vue-analytics
his plugin will stop receiving feature requests. I will only spend time for important bug fixes. Google moved from analytics.js to its new gtag.js library and I've created a new plugin called vue-gtag. I suggest you to start using that one if you are about to create a new project.
You can see an example here: https://matteo-gabriele.gitbook.io/vue-gtag/#add-plugin-to-your-application
import Vue from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";
Vue.use(VueGtag, {
config: { id: "UA-1234567-1" }
});
new Vue({
render: h => h(App)
}).$mount("#app");
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.
The documentation says like this:
<script type="text/javascript" src="assets/js/vue-shopify-products.js"></script>
And then before you initialize vue, you do this:
Vue.use(ShopifyProducts);
What do you do if you use vue-cli webpack template?
My main.js file looks like this
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import * as d3 from 'd3'
import * as shopifyProducts from 'vue-shopify-products'
Vue.config.productionTip = false
Vue.use(shopifyProducts)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
created: function () {
d3.csv('/static/data/csv-files/bicycles.csv', (data) => {
let products = this.$formatProducts(data)
console.log(products)
})
}
})
This doesn't work as I get the error 'Uncaught (in promise) TypeError: _this.$formatProducts is not a function'. What is the correct way to include Vue-Shopify-Products and reference the $formatProducts function?
Since it is an npm package installed as a dependency, you should import it this way,
import defaultExport from "module-name";
so this should work:
import ShopifyProducts from "vue-shopify-products";
Vue.use(ShopifyProducts);
After that you can get rid of the script reference of the module.
Edit 1:
I don't think is going to work since the module you are trying to use as a Vue plugin do not follow the conventions especified on the Vue documentation.
use the vue-cli to created demo
index.js code
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// not work !!!
App.created = function () {
console.log(1231231232);
}
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
i dont want to useextend`，because it will exec twice
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!