I tried loading it like this:

mounted() {
    var script = document.createElement("script");
    script.src = "https://platform.twitter.com/widgets.js";
    script.type = "text/javascript";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
  },

but that doesn’t work - it doesn’t load.

(I used the html from here except for the script tag.)

I also tried it with “vue-twitter” (like it and with a boot-file) which uses VueScript2.load but it says: "TypeError: window.twttr is undefined" so it doesn’t properly load that script.

I could be overlooking something trivial here. NoScript shows a request to twitter, I hope it’s not a CORS issue - I’m testing with quasar dev and Firefox and would expect a CORS-related error message if it was.

How to load external (libraries/)scripts?

I’m building a Quasar SPA that explains why and how to switch to GNU/Linux. (For example from Windows 7 whose support ended on January 14th.)

At the top of the page it features a slideshow (QCarousel) that shows screenshots of (KDE/)GNU/Linux - I would like change it so that the screenshot is always fully visible. I think the best way to achieve this would be to somehow replace the whitespaces left and right of the image with parts of the next and previous images when the window has very wide dimensions. Here is the SPA with those whitespaces.

Maybe somebody here has any help on how to achieve that?
Has this been implemented somewhere already? Would it be an additional feature for the QCarousel component?

There’s also many other things I’m interested in such as how the cards could be made to flip in a way that looks good instead of sliding when swiping them or why Quasar adds all these paddings many of which I had to override or how to prevent the white flickering when QCarousel switches the image. But these aren’t as problematic as that slideshow-issue as of right now and I’ll add them to the issues where you could comment too.
It’s still under development.

Have you tried running it from the console to see error messages there?

Basically like https://gs-shop.github.io/vue-slick-carousel/#/example/center-mode with "slidesToShow": 1

Most relevant issue seems to be: https://github.com/quasarframework/quasar/issues/6135

I have changed it now so that if there’s a large whitespace the previous and next buttons cover the whitespace-area.

I’m building a Quasar SPA that explains why and how to switch to GNU/Linux. (For example from Windows 7 whose support ended on January 14th.)

At the top of the page it features a slideshow (QCarousel) that shows screenshots of (KDE/)GNU/Linux - I would like change it so that the screenshot is always fully visible. I think the best way to achieve this would be to somehow replace the whitespaces left and right of the image with parts of the next and previous images when the window has very wide dimensions. Here is the SPA with those whitespaces.

Maybe somebody here has any help on how to achieve that?
Has this been implemented somewhere already? Would it be an additional feature for the QCarousel component?

There’s also many other things I’m interested in such as how the cards could be made to flip in a way that looks good instead of sliding when swiping them or why Quasar adds all these paddings many of which I had to override or how to prevent the white flickering when QCarousel switches the image. But these aren’t as problematic as that slideshow-issue as of right now and I’ll add them to the issues where you could comment too.
It’s still under development.

I tried loading it like this:

mounted() {
    var script = document.createElement("script");
    script.src = "https://platform.twitter.com/widgets.js";
    script.type = "text/javascript";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
  },

but that doesn’t work - it doesn’t load.

(I used the html from here except for the script tag.)

I also tried it with “vue-twitter” (like it and with a boot-file) which uses VueScript2.load but it says: "TypeError: window.twttr is undefined" so it doesn’t properly load that script.

I could be overlooking something trivial here. NoScript shows a request to twitter, I hope it’s not a CORS issue - I’m testing with quasar dev and Firefox and would expect a CORS-related error message if it was.

How to load external (libraries/)scripts?

Sounds good (good enough at least).

So I investigated this further and edited the post above: QF with electron can build for arm. To do so one just has to edit quasar.conf.js to set arch: 'arm64' in the packager options or if using electron < 5 arch: 'arm64' in the builder options and bundler: 'builder', in the electron options.

For testing whether or not it works at all and how well it runs performance-wise - including during development (basically quasar dev -m librem5) - it would probably be useful to have a Librem5 virtual machine that emulates the ARM architecture. I asked about that here. As far as I can see, right now there’s only a x86_64 virtual machine that one could run without the devkit.

I tested it with that vm by running: sudo qemu-system-x86_64 -boot menu=on -drive file=./qemu-x86_64.qcow2,format=qcow2 -cdrom ./linux_64_build.iso -vga virtio -display gtk -m 2G -enable-kvm (install a file explorer, mount the cd, copy it over, navigate to it in the console, run chmod +x filename, do the chown and chmod changes, run the app).

The app ran on it but the window size is too large and I couldn’t change it.
(larger res)

So probably one needs to have it start with the device window size. A simple way to implement this would be the fullscreen-plugin. Here’s how it looks when it’s set to fullscreen with that plugin:
(larger res)

However, while I can click that button I can’t click on the layout drawer in the upper left. The cursor icon doesn’t change when hovering over it and there’s no error message in the console. The auto-import is set to auto in quasar.conf.js and I have also added ‘QLayout’ to the components array there. I can click on it on my Debian GNU/Linux though.

Finding out why it isn’t clickable and fixing that would probably be the next step in getting it to work with the Librem5. Maybe somebody here has an idea what might cause it to be unclickable?

Librem 5 is an upcoming smartphone seeking to become the first mainstream, completely free and open source GNU/Linux smartphone.

It’s running PureOS which is based on Debian and by default it’s using GNOME/Phosh as its mobile desktop environment but it can also be used with KDE’s Plasma Mobile (and Ubuntu Touch).

On Debian you can run Electron apps so I’d expect those to work on the phone as well in principle. It would need to be built for the ARM architecture and electron can do so: one has to simply make some changes to quasar.conf.js or pass the (–bundler if using electron>4 and) --arch parameter(s).

Now even though Quasar Framework with Electron can be made to build for the ARM architecture it is currently mostly meant for desktop, not mobile, even though it could adapt well to smaller screens. So would it theoretically be possible to properly use mobile functionalities of the device with an Electron build? Furthermore CPU-usage and power drain could be major problems with using Quasar/Electron-made projects on the device and I’m not sure to which extent these could be fixed if they are.

Moreover I’d like to know whether there are yet plans to create a new build-option optimized specifically for GNU/Linux-phones or the Librem 5 (GNOME/Phosh/GTK and KDE/Plasma Mobile/Qt in particular).

I think the optimal longer-term solution would be to have a Quasar project’s code transpile to GTK and Qt or at least to have them integrate it. I don’t know how possible that is and how much work that would require.

-> What’s the current state of GNU/Linux/Librem5 support by the Quasar Framework?

Thought it would be a good time to ask about it, now that the Internet has just begun its second half-century.

Also it looks like the first devices will be shipped to backers starting November 15th - so some could soon begin working with real devices instead of just a virtual machine or devkit.