I'm currently building a web app using vue3. and Now I need to use a hijri datepicker but the libraries I found don't work on vue3! I don't use jquery on my app so I don't want a library depending on jquery.
what library would be good for me? also how can I do it manually without a library? and resources teaching this would be so fine.
any help would be appreciated!
I tried to use this lib but it doesn't work with vue 3 only with vue2.
PS: I'm using vuetify on my app if it would help
I will introduce you to 3 sites for implementing the Hijri or Solar calendar, which you can use in Vue js 3 using API composition and API option.
The first link with option API - The second link with API composition API - The third link is also a complete document for Hijri or Shamsi calendar.
Related
Building an enterprise level application with Vue 3 and unfortunately I haven't found any suitable plugin to make the application responsive. While there are older plugins that work with Vue 2, nothing I have found works with Vue-3.
What would be a suitable approach to make the application responsive?
Assuming CSS media queries aren't enough I would honestly just use the matchMedia API.
You could react to window resizes with a MediaQueryList onchange handler.
I built an application in React, is there a way that the same code will be used for a website?
I know Instagram is built on React and it also has a website, I wonder maybe you should add some link or something that it will open for me as a website?
Or maybe there is no such way and I have to build a website separately?
First off all, If you have written any code which is related to native functionality, then it can be challenging.
If you have only worked with views, images, and some of the basic functionality.
It can be done with react-native-web you can easily migrate your project to react-native-web.
If you project is created with expo they already provide react-native-web support.
Option 2: If you have some of the code you want to share and some is that you don't want to share or can't share.
You can use renderProp or customHooks pattern to reuse your logical code and seperate your view for react-native and react js apps.
If you want to reuse your views too, you can do those with primitives.
you can use styled-component primitives for that.
https://medium.com/react-native-training/sharing-code-between-react-web-and-react-native-applications-7f451af26378
You can get some idea here as well.
I'm looking at creating my first Directus interface. Has anyone had any success using the vue-datetime picker (https://github.com/mariomka/vue-datetime) as part of a Directus interface? Is there another way to create a Directus date-time picker?
Now days chrome and firefox has their own pickers for the <input type="date">. If you want to do you own just follow the instructions of
This intructions are for creating a interface
https://github.com/directus/directus/blob/main/docs/guides/extensions/interfaces.md
Use the actual date interface from the admin app for inspiration. https://github.com/directus/directus/tree/main/app/src/interfaces/datetime
The process to make a extension is simple
Create the extension with the toolkit.
Add Vue code.
Add your interface to a table
I want to use some of the charts by ngx-chart in my Aurelia application, is there a way to do this?
There is a way to use ngx-chart within an Aurelia application but to make it work, you will need to bring in the whole runtime of Angular to support it, and it's not going to be small. You can use a dedicated charting library like Chart.js https://www.chartjs.org/ or use a wrapper https://github.com/grofit/aurelia-chart for it.
I am trying to use the Google Places API in react native. I first tried using fetch to make requests directly, but I just saw that you have to use the existing classes/objects provided by Google, like the PlacesService. Searching for React Native libraries that include the API objects for you just brings up some that do the autocomplete feature and not much else.
The Places API docs say to load the library using this url: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
This is straightforward to me in regular web dev, but not in react native. What is the standard procedure for loading a library like this in React Native?
Right now I have copy and pasted the JS contents from the link above into a file in my React Native project. But, I don't even know how to export it as I can't really tell what the name of the object/function is. google ? google.maps ?
Right now I am doing:
export default google.maps
and also tried
export default google
but these both throw this error:
cannot read property 'createElement' of undefined
This is my first React Native project, so I'm sorry if this is a basic question.
Thanks for the help.
but I just saw that you have to use the existing classes/objects provided by Google
I'm not sure what you mean by that. Places api can be done via fetch/api request. Look at how react-native-google-places does it at https://github.com/FaridSafi/react-native-google-places-autocomplete/blob/master/GooglePlacesAutocomplete.js#L227
They use a new XMLHttpRequest(); but fetch() would work as well. It is web api and I don't think you need to run any external javascript/load any external js files.