I hope you can enlighten me what I am doing wrong here with vue-filepond.
So my problem is when I want to edit my form I cant get preview of file I uploaded earlier, strange thing is that I used all the same code for Vue 2 and it worked without problem, but on Vue 3 it doesn’t work(I am sure I’m missing something and I did install v6 for Vue 2 and newer version for Vue 3).
My file is there when I am editing my form but not visible in Filepond component
This is how Filepond component looks like:
<file-pond
ref="pond"
credits="false"
allow-multiple="true"
allowFileTypeValidation="false"
allowFileSizeValidation="false"
fileValidateTypeDetectType="false"
allowRemove="true"
checkValidity="false"
instant-upload="false"
v-bind:files="myFiles"
:beforeRemoveFile="handleFilePondRemoveFiles"
v-on:updatefiles="handleFilePondUpdateFiles"
v-on:init="handleFilePondInit"
/>
So when I am editing a form (using Laravel for backend and passing a data to Vue component in blade file...) in mounted method in Vue, this code works fine with Vue 2, I can see then file which I uploaded earlier (img or pdf) but on Vue 3 not, but its actually there:
mounted() {
if (this.isEdit) {
for (let file in this.files) {
let f = new File([this.files[file]], this.files[file].name, {
type: 'application/pdf'
});
this.myFiles.push(f)
}
}
},
I went through your docs but could not find any proper info or code example that would work for me...
Thx for help!
I came up with this solution and it works, feel free to correct me if I am wrong :)
mounted() {
if (this.isEdit) {
for (let file in this.files) {
this.getUploadedFile(this.files[file].original_url, this.files[file].name, this.myFiles)
}
}
},
and method
methods: {
async getUploadedFile(url, fileName, arr) {
await fetch(url)
.then(res => res.blob())
.then(blob => {
arr.push(new File([blob], fileName, {
type: blob.type
}))
});
},
and in filepond component I binded files like this:
v-bind:files="[...myFiles]"
Now I can see my uploaded file in FilePond component and delete it or upload new one...
Related
Is it possible to fetch a local .json. file using fetch()? I originally used the import method but the site's data doesn't get updated unless the page gets reloaded.
I tried doing this but it's not working:
stores/characters.ts
export const useCharactersStore = defineStore("characters", {
state: () => ({
characters: [],
}),
getters: {
getCharacters: (state) => {
return state.characters;
},
},
actions: {
fetchCharacters() {
fetch("../data.json")
.then((response) => response.json())
.then((data) => {
this.characters = data.characters;
});
},
},
});
app.vue
import { useCharactersStore } from "~/stores/characters";
const store = useCharactersStore();
onMounted(() => {
store.fetchCharacters();
});
Any help would be appreciated.
maybe a bit late but I have encountered the same problem migration from Nuxt 2 to Nuxt 3.
I'm certainly no expert on this, so if anyone finds a better way or if I'm totally wrong please let me know !
Whenever you import a json file in vue code they are imported as a module, that get's embedded within the code compilation on build (Vue Docs). Tu use json as a external file you need to place your json within the /public directory and use axios or fetch to load the file with a lifecyle hook.
This could be mounted() for options api or beforeMount()/onMounted() with composition api.
However some important annotations for this method.
If the json file you want to use in your app is not reactive, i.e. won't change, you should place this in the static folder of the nuxt app.
In your example you fetch '../data/...', this would imply the server knows the domain to look for. It can't call the route like this, you would have to give the full url if you put your json file in the static folder.
Set the baseUrl in the of your nuxt.config.ts, see docs for specifications.
Then you can access the static folder with your .env variables
--> $fe
Then in you data script you can access your json file
async getJson(some parameters){
const data = $fetch('your domain with the runtimeConfig composable').then((data)=>{ console.log(data)});
Sidenote you can also load the file from the server-side using fs.readFile
read more about this in this awesome post here
I want to write local docusaurus plugins using typescript. (it works fine using js)
Is this possible? Like the docs here suggest to put them under ./src/plugins/name-of-plugin.
Reading the docs there are examples with ts, but if I just try and replace is with ts i get various errors. (eg "Cannot find module").
I'm using typescript for pages as well.
Adding the file extension worked for me.
For example:
plugins: ['./src/plugins/my-plugin.ts'],
my-plugin.ts
module.exports = async function myPlugin(context, options) {
return {
name: "my-plugin",
async loadContent() {
console.log("Hello World plugin wow!");
},
async contentLoaded({ content, actions }) {
console.log(content);
},
};
};
removing the extension shows the same error :)
I'm on Nuxt 2.13 and I'm having an issue with window.__Nuxt__(function(a,b,c,d,.....)). I don't know if it will affect my SEO or not, but it's on my nerve and shows all my language file.
here is the situation : there is a lang.json file in my app. i read it and store it in a lang state in Vuex. but window.__Nuxt__ shows my lang which i don't want to!!
i have found three solutions so far to remove it:
1: by adding this code to nuxt.config.js
link to stack answer
hooks: {
'vue-renderer:ssr:context'(context) {
const routePath = JSON.stringify(context.nuxt.routePath);
context.nuxt = {serverRendered: true, routePath};
}
}
}
2: by commenting some codes in node_module/#nuxt/vue-renderer/dist/vue-renderer.js
link to article
3: by using cheerio package and scraping the script from body
link to article
const cherrio = const cheerio = require('cheerio');
export default {
//The rest configuration is omitted
hooks: {
'render:route': (url, result) => {
this.$ = cheerio.load(result.html,{decodeEntities: false});
//Since window.__nuxt__ is always located in the first script in the body,
//So I removed the first script tag in the body
this.$(`body script`).eq(0).remove();
result.html = this.$.html()
}
}
}
all three will do the job, BUT !! my components won't be lazy loaded anymore as i use an state in Vuex to give theme address for lazy load! for example:
computed:{
mycomponent(){
return ()=>import(`~/components/${this.$store.state.siteDirection}/mycomp.vue`)
}
}
it will give error that webpack cant lazy load this as this.$store.state.siteDirection is null.
how can i solve this??
Could someone tell me what is wrong with this setup, where I want to load a config.json file before the vue app is created and access the config in the components with this.$root.config. There is no root config element I can access? Missing something? Thanks for your help! The config.json file is correctly loaded, can log the config to the console. But it is not added to the root properties from Vue?
fetch('/config.json')
.then(res => res.json())
.then(config => {
createApp(App, {
data() {
return config
},
created() {
console.log(this.$root.config);
}
}).use(store).use(router).use(i18n).mount('#app');
});
What you place in data won't be found in $root but, as Abdelillah pointed out, in $root.$data. Since App is the root component, though, you can just use this.config. In any subcomponent, you'd have to use this.$root.$data.config.
But Vue 3 provides a cleaner alternative to provide data to any component in your app: config.globalProperties.
Example:
const app = Vue.createApp({});
app.component('test', {
mounted() {
console.log(this.config);
}
});
Promise.resolve({
foo: 'bar'
}).then(config => {
app.config.globalProperties.config = config;
app.mount('#app');
});
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<test />
</div>
As you can see, logging <test>'s .config outputs the globalProperty.config set on the app, and it's going to be the same for any component in the app.
If you want to provide data to any descendants of current component (no matter how deep, skipping intermediary parents), you could use provide/inject. While I find this particularly useful for providing some data to all the children of a particular component (and not to the rest of the app's components), it can obviously be used on the root component, which would make the provide available cross-app via inject wherever you need it.
there is no property called config on your data, what you are doing is simply returning the JSON object you imported, you should be doing:
fetch('/config.json')
.then(res => res.json())
.then(config => {
createApp(App, {
data() {
return {
// config: config
config
}
},
created() {
console.log(this.$root.$data.config);
// or console.log(this.config);
}
}).use(store).use(router).use(i18n).mount('#app');
});
Using Vue.js (Vuetify for FE).
A page reload causes the getter in Vuex to fail with pulling required data from the store. The getter returns undefined. The code can be found on GitHub at: https://github.com/tineich/timmyskittys/tree/master/src
Please see the full details on this issue at timmyskittys.netlify.com/stage1. This page has complete info on the issue and instructions on how to view the issue.
Note, there is mention of www.timmyskittys.com in the issue description. This is the main site. timmyskittys.netlify.com is my test site. So, they are the same for all intents and purposes. But, my demo of this issue is at the Netlify site.
I read the complete issue in the website you mentioned. It's a generic case.
Say, for cat details page url: www.timmyskittys.com/stage2/:id.
Now in Per-Route Guard beforeEnter() you can set the cat-id in store. Then from your component call the api using the cat-id (read from getters)
I found the solution to my issue:
I had to move the call of the action which calls the mutation that loads the .json file (dbdata.json) into a computed() within App.vue. This was originally done in Stage1.vue.
Thanks all for responding.
I had the same issue and my "fix" if it can be called that was to make a timer, so to give the store time to get things right, like so:
<v-treeview
:items="items"
:load-children="setChildren"
/>
</template>
<script>
import { mapGetters } from 'vuex'
const pause = ms => new Promise(resolve => setTimeout(resolve, ms))
export default {
data () {
return {
children: []
}
},
computed: {
...mapGetters('app', ['services']),
items () {
return [{
id: 0,
name: 'Services',
children: this.children
}]
}
},
methods: {
async setChildren () {
await pause(1000)
this.children.push(...this.services)
}
}
}
</script>
Even though this is far from ideal, it works.