Given example from the docs
<button hx-post="/clicked"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="outerHTML">
Click Me!
</button>
I want to change <scheme>://<netloc>/clicked to<scheme>://<netloc>/api/v1/clicked, so prepend /api/v1 into the base URL so all requests use this version. How to do that?
The only solution I can think of is to just alter the event path.
<script>
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.path = `/api/v1/${event.detail.path}`
})
</script>
Related
Let's say my nuxt app is running in a subfolder 'test'.
nuxt.config.js:
router: {
base: '/test/'
}
That means my application runs on localhost:3000/test
Now, when I go to localhost:3000/tes, all i get is a 404 Error with the contents Cannot GET /tes
However, I want to redirect to /test, or show my own 404 page. But I couldn't figure out a way to handle that case.
I tried using a middleware, but that only worked for links within the subfolder.
Thanks for your help!
I found what I needed in the nuxt documentation:
Using a Hook to router.base when not on root:
https://nuxtjs.org/docs/configuration-glossary/configuration-hooks#redirect-to-routerbase-when-not-on-root
You can create an error layout for the 404 page
Error page
Or you can use middle to check the incoming URL and redirect them somewhere.
Middleware
You can create your error layout (error.vue in layout folder) and when error it will show that page.
<template>
<div>
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'error' // you can set a custom layout for the error page
}
</script>
Link showing practically how to do that: medium
I am having this little problem and i dont know what it is?
<div class="add-picture">
<vs-upload limit="1" action="https://jsonplaceholder.typicode.com/posts/" #on-success="successUpload" />
</div>
I dont know what javascript does to do this.
Vue itself doesn't have the ability upload the file to your server. You can pass parameters from Vue into a POST request to a back end using method event handlers and a client like Axios, but Vue itself merely forwards the data while something like Axios would be responsible for the transfer.
There are other clients out there who can handle HTTP requests and a plethora of components out there for handling file uploads, but Axios is the one I chose as an example.
This article here might be of more assistance.
<template>
<vs-upload limit=1 action="https://jsonplaceholder.typicode.com/posts/" #on-success="successUpload" />
</template>
<script>
export default {
methods:{
successUpload(){
console.log('success')
}
}
}
</script>
limit takes a Number not a String. Vue is terribly confusing on this subject, I know.
And Vuesax library is full of bugs, fyi.
https://lusaxweb.github.io/vuesax/components/upload.html#automatic
I have some data in my MySQL with HTML code.
Example:
<b>William Shakespeare</b> was an English poet.
I need to insert this text into a Vue.js Component.
My code is:
mounted() {
axios
.get(MY API)
.then(response => (this.author = response.data))
.catch(error => error("error"));
}
And then:
<p class="card-text">
{{author.description}}
</p>
The problem is the tags into the description aren't interpreted and it shows the HTML tags.
Use v-html directive on your parapraph:
<p class="card-text" v-html="author.description" />
But BE VERY CAREFUL about the possibility of XSS attack if author.description is going to contain user provided data.
What am I doing?
I am using the intersection observer API to make lazy loading.
What have I tried?
I tried the code in a simple HTML page and it works perfect, but when I use the code in vue, the images won't load (local images). If I put a htttp source images (online images) it works perfect, too. I think this is a webpack error config. Am I right? How can I fix it?.
Whats the error?
When i use a local image the code doesnt work, if only change that src with something else like this image https://images.pexels.com/photos/69817/france-confectionery-raspberry-cake-fruit-69817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 the code WORKS, why i cant make it work with local images?
HTML AND SCRIPT
<template>
<div class="container" id="section3">
<span class="containerTitle">Galeria</span>
<div class="wrapper">
<img v-lazyload data-src="#assets/images/001.jpg" class="card">
</div>
</div>
</template>
<script>
import lazyload from '../directives/lazyload'
export default {
directives:{
lazyload
},
}
</script>
DIRECTIVE
export default{
inserted: el =>{
const options = {
// root:
rootMargin: '0px 0px 0px 0px',
threshold:1
}
var observer = new IntersectionObserver((entries,observer) =>{
entries.forEach(entry => {
if(entry.isIntersecting){
el.src = el.dataset.src
observer.unobserve(el)
console.log('intersecting');
}
})
},options)
observer.observe(el)
}
}
CODE IMAGE
FOLDER
The issue is with your image path.
You can fix it with either using public folder and give it in path.
You can also check for auto suggestion which come up while typing, this may help you to check whether your path is correct or not.
Like this
Your path is wrong. You gave ../assets/images/001.jpg as the path to the image (as stated in your question), but according to your directory tree it's ../assets/001.jpg (or write it like #/assets/001.jpg, # points to root of project). That should fix it.
As far as I remember you can't use # sign inside <template>.
So you can either:
require it
<img v-lazyload :data-src="require('#assets/images/001.jpg')" class="card">
import it
<template>
...
<img v-lazyload data-src="image" class="card">
...
</template>
<script>
import img from '#assets/images/001.jpg';
...
data() {
return {
image: img,
}
}
...
</script>
use relative path
<img v-lazyload data-src="../assets/images/001.jpg" class="card">
You can check how it works in Vue docs
I can't remember why this works, but you need to use the following syntax:
<img v-lazyload data-src="~assets/images/001.jpg" class="card">
with the ~ replacing the ../.
I will update the answer if I figure out exactly why.
doing extensive research i found this article about vuejs and static assets.
https://edicasoft.com/weblog/2018/04/27/static-vs-srcassets-webpack-template-vue-cli/
They said that this kind of problems occurs "because" of webpack,like i though, so the solution for this (i hope not the only solution), but this is the solution so far...
QUOTE
All asset URLs such as , background: url(...) and CSS #import are resolved by Webpack as module dependencies like require('./logo.png').
We then use loaders for Webpack, such as file-loader and url-loader, to process them. Webpack template has already configured these loaders.
File-loader helps to determine the final file location and how to name it using version hashes for better caching. Thus you can put your static assets near your .vue files and use relative paths. There is no need to put them strictly into the ‘assets’ folder.
Url-loader helps to conditionally inline assets such as base64 data URL, reducing the amount of HTTP requests.
So what the hell should I do with it?
The answer is: put your assets in the ‘src’ folder.
I tested this and it works perfect BUT you CANT make a subfolder and this for me, is disorganized.
This is the final folder structure to get this done using intersection observer api as vue directive!
I am having trouble setting up a simple website with different webpages and staying DRY.
I have everything set up so I the last fragment of the url is the name of the template that needs to be loaded in the content part of the webpage. All I want to do now is load that template in a specific location based on the url.
In any examples, they do this:
{{#if showCreateDialog}}
{{> createDialog}}
{{/if}}
{{#if showInviteDialog}}
{{> inviteDialog}}
{{/if}}
I'd like to do something along the lines of
{{> {{template_name}} }}
Sadly, that doesnt work. I tried this as well:
{{{content}}}
Template.content.content = function () {
var url_frag = Session.get("url_frag");
return Template[url_frag]();
}
This didnt work either. Please help!
Edit:
hmm. perhaps, my error is not in loading the template but in capturing the url:
var TodosRouter = Backbone.Router.extend({
routes: {
"*url": "main"
},
main: function (url) {
Session.set("url", url.split('/'))
}
});
The error I am getting arises when url_frag is undefined...
var url_frag = Session.get("url_frag");
initially, this works, but upon changing webpages, it fails...
Solved. I just left backbone out of it
Template.content.content = function () {
var url = window.location.pathname.split('/');
var url_frag = url.pop()
return Template[url_frag]();
Then in the html:
<template name="content">
{{{content}}}
</template>
You could also try the router smart package at atmosphere, which also supports complex routes and filters.
https://atmosphere.meteor.com/package/router
Install meteorite using npm install -g meteorite
Install router using mrt add router
Add {{renderPage}} to body
Tada! /login now renders {{> login}}
Read the document here: https://github.com/tmeasday/meteor-router