I'm trying to add a chart using this Vue library. I added the dependencies into the Config file. The library asks us to use Vue.use(). But I get Vue is undefined. Any ideas?
https://vuejsexamples.com/lightweight-vue-component-for-drawing-pure-css-donut-charts/
Please use the App Level Enhancments
https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
Belowe text is copied from Vuepress documentation:
App Level Enhancements
Since the VuePress app is a standard Vue app, you can apply app-level enhancements by creating a file .vuepress/enhanceApp.js, which will be imported into the app if it is present. The file should export default a hook function which will receive an object containing some app level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks:
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
}
Related
I have a little problem with vue.js recently and wondering if anyone could help please?
I have a new install of laravel 7.3.3 and vue.js 2.6.12 can not get the vue devtools extension to show me my components, variables etc.
This is what the devtools look like :
Here is the repo : https://github.com/yex777/pa-hub
Thanks for any help!
I had a similar issue with my repo. I don't actually register components globally, I instead make components and just register them on the page they are needed. My issue with this was caused because I was binding Vue to the page twice. Once in app.js and then again in my custom JS file for my component. As such, I think the dev tools was picking up the wrong Vue instance.
I resolved my issue by removing the references to vue in my app.js file and then only binding elements using my new JS file. So my app.js file only contains
require('./bootstrap');
and then I have a separate file which I include on the relevant page which looks a little like this:
import Vue from 'vue';
import Axios from 'axios';
import StudentManagement from './StudentManagement.vue';
window.axios = Axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
new Vue({ // eslint-disable-line no-undef, no-new
el: '#student-management',
render: h => h(StudentManagement),
});
I suspect you may have a similar issue where the Vue instance is being setup twice.
The easiest way to check is in the console, it will output a message saying that Vue is in development mode:
As you can see, it's got a 2 next to the message, saying the message has been output twice. If this is the case, you just need to make sure you only include or set up your Vue instance once and the dev tools should pickup your components.
I have a laravel application with my front-end written in Vuejs. I want to prerender the public pages only. What is the correct configuration for the prerender-spa-plugin to do this?
Most tutorials on the web show how to do it for the whole website, but I need only few pages pre-rendered. I must be missing something but I get only a blank page and my javascript is not loaded during the prerendering. I am not using vue router.
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
// In the mix webpack config -
plugins: [
...
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'static'),
// Required - Routes to render.
routes: [ '/' ],
})
]
Error message: Unable to prerender all routes!
The javascript/vue files etc for the static part should all be in the static directory. It won't work if they are in the folder you normally use for organizing the rest of your application.
You need to use HTMLwebpackPlugin to copy over the html to the output directory (say, in public). Mix's copy happens too late. Chunks will help get only the js files you want.
I'm having trouble understanding how to use the Framework modules in nativescript-vue.
For example this module, is what I am trying to understand how to use:
https://docs.nativescript.org/ns-framework-modules/platform
Do I need to declare in App.js / Main.js or in the component I'm going to use?
I come from Web Development with Vue.js, I think an implementation example I'm trying to follow would look like this:
It is an example of the web that I am thinking of being the same as the way of implementation in the mobile.
On the web if I needed to use Axios I would import it into App.js / Main.js to stay global in the application or SPF to stay local and be able to call in the desired components.
In mobile if I use pure nativescript the import is clear, but in nativescript-vue I can not understand how to use it, I do not know if it already comes configured by default or not.
Import modules where you need them in your code, both app.js and SPF.
app.js
import axios from "axios";
var platform = require("tns-core-modules/platform");
var instance = axios.create({ baseURL: "https://myendpoint.com" });
if (platform.isAndroid) { /* ... */ }
File.vue
import axios from "axios";
var platform = require("tns-core-modules/platform");
export default {
methods: {
androidFunc() {
if (platform.isIOS) {
axios.get("https://website.com/api/ios") // ...
}
}
}
}
If I need something globally, I usually use Vue instance properties (Vue.prototype.$myProperty) or Vuex store.
You should be able to use all the CommonJS Vue modules you used in Web, meaning it should not have any dependency over browser specific features.
You might still able to use Axios as it internally uses nothing but XMLHttpRequest, thats a valid global object in NativeScript environment.
If you have Vue module that depends on HTML Dom / document / window / local or session storage etc., then it might fail. FYI, there are plugins like nativescript-localstorage which simulates features like local / session storage.
I installed the API platform separately (on nginx + macos), first a symfony4 project that's exposing the api to http://platform.api/api and second the react admin interface through yarn start.
The admin interface successfully loads the view and allows me to list and create new elements. But showing and editing of the different elements results in a 404 and a Element does not exist error message on the interface since the interface adds an additional api to the url, like http://platform.api/api/api/groups/3
Here is my App.js
import React from 'react';
import { HydraAdmin } from '#api-platform/admin';
export default () => <HydraAdmin entrypoint="http://platform.api/api/"/>;
I assume that this is an issue directly on the admin react project, where the additional /api gets added. Any thoughts on how and where to configure this correctly?
There is a known issue in the admin if the API is exposed in a subdirectory, and a proposal to fix it (not completed yet): https://github.com/api-platform/admin/pull/86
A quick workaround is to drop the /api prefix (register the API at the root). The only other solution is to finish this Pull Request.
I am using Vue.js (within the Laravel framework) and I'm new to both. I'm trying to understand some basic ideas about some code I"m trying to use:
App.js:
import Vue from 'vue';
import Toasted from 'vue-toasted';
Vue.component('toast-alert', require('./components/ToastAlert.vue'));
Vue.use(Toasted);
ToastAlert.vue:
<template>
</template>
<script>
export default {
props: {
},
mounted() {
this.showToast()
},
data() {
return {
message: 'Status Update',
}
},
methods: {
showToast() {
this.$toasted.show(this.message, {
duration: 3000
});
}
}
}
</script>
Questions:
I understand the import tells the script that we ant to pull in certain node modules but I don't totally understand what use() is for. I have read documentation to see thats what you do with plugins (https://v2.vuejs.org/v2/guide/plugins.html), but not really understanding more than that.
Again from the documentation, I see that when registering a Vue component, the second parameter is a list of options, ie: template, props, methods etc. I'm a bit confused about what require does and how it translates the vue file (which is a composed of tags and a tag exporting an object) into a final object which meets the standards of Vue.component.
1) In Vue, calling Vue.use( Plugin, Options ) makes the plugin available throughout the application. It's basically a way to bootstrap a plugin i.e. Vue-Toasted, so you can use it throughout your application. You can define configuration options as well here.
2) Vue.component is used to register (your own) components in the application. It allows them to be used within each other component, without having to define them in each file. Think of the app.js file as the bootstrap file, it defines all of the plugins, components, etc. and registers them for use in Vue. require is importing the file and Vue is parsing the template and object. Note this is all compiled in webpack and cannot load in a browser as-is.