VUEJS SSR, how to? - vue.js

I made a VueJS 3 app (WebPack 3.12.0), with prerendering (not serverside), and the content of some page are loaded via ajax request, so google bots can't see the text (this is the problem here).
I read that I need to use SSR to do this. So I tried a couple of tutorials but no one seem to works (some do nothing, others crashes my app). I don't really know which one is the best and they are all using differents solutions.
First of all, do I need to use SSR to achieve what I want ? And if yes, anyone have a good tutorial (and a working one) ?
Thanks guys !

The best solution for SSR with Vue is to use Nuxt.js: https://nuxtjs.org/
It's not that complex, working really great !
It will probably be migrated to Vue3 really soon (Nuxt 2.15.2 is using Vue2 still), maybe even today during the JS World Conference.
Also, you can check those videos of Debbie who does a nice job of explaining things in a clear and simple way: https://www.youtube.com/c/DebbieOBrien/videos

Related

How to use vue components in a svelte app?

I really love using Svelte but at this moment, one of its cons is the lack of ready-to-use components for Svelte. I want to use vue-atlaskit in a project, but I really prefer using Svelte. Is it possible to use vue components inside a Svelte app?
I guess it all should be just "web-components", but I really don't know how to do it.
I checked with people in the Svelte Discourse. There is no simple way to do that. The suggestion is to convert the UI components I need from Vue to Svelte.
While not a comprehensive answer, I would add some findings on the topic:
As you suggested, I would try with Web Components. According to Custom Elements Everywhere the support for Web Components is fairly high for both frameworks. Vue states that the support is 100% although the site shows less so there is some discrepancy. But basic tests pass 100%. Svelte is also at 100%. This paints a fairly positive picture.
There is another question on SO that refers to consuming Web Components in Svelte.
Here is another reference article on how to create web components with Vue 3.
Note: I will try to update the answer as I learn more. I will be testing this out on a migration of a PWA from Vue to Svelte, where I plan first to use Svelte components in an existing Vue app and then perhaps switch to using Vue components in a Svelte app, depending on how things go with rewriting.

How to use microfrontends with Vue/Nuxt?

I wanted to know how to use Microfrontends with Nuxt or at least Vue.
Is there a plug & play simple solution to have it working quickly?
I've heard about Webpack's v5 ModuleFederationPlugin for example, is this a valid thing to start my Nuxt project?
As of today, Nuxt2 is still using Webpack4 so ModuleFederationPlugin will not be a possible solution.
Nuxt v3 will come with Webpack's v5 support and you'll probably be able to try it then. I also heard that the same could be used with Vite btw.
As a general answer, you need to understand that a Microfrontend is not something simple to do. It is more about how you do structure your app in the larger scope.
It's like having a micro-service on the backend: it can be done is multiple ways and it all depends of the needs of the company/team.
If you do create a Vue2 or Vue3 project with the Vue CLI, you'll still have Webpack v4. You can probably try to make the upgrade yourself if planning to use ModuleFederationPlugin.
As an alternative, there is single-spa. This is a way of doing it (probably not the only one).
Here is a podcast show talking about the subject in depth: https://devchat.tv/views-on-vue/building-micro-frontends-with-lawrence-almeida-vue-160/
It may be relevant to understand the general way this is working and also the pro/cons.
If you're not satisfied with this approach, there are a lot of articles on the Web talking about Microfrontends and some Google-fu will be enough to give you an alternative way.

Alternate for template engines in express

I dove into express.j and encountered pug (template engine).Now, i don't like the idea of writing code that works very similar to HMTL+ some identation.I'd rather stick with normal HTML.I want to discard view engines altogether . Is there another way to hook these html,css and javascript files instead of pug.I read Angular is utilized. Could someone elaborately with a form examlple,styled with css and how to integrate Angular with express.js . Perhaps any tutorial available online...
P.S. Please refrain from using too much technical terminology..I'm a noob. Simple english is appreciated.
You can use 'handlebarsjs'.
That is a great tutorial to get start.
https://www.youtube.com/watch?v=1srD3Mdvf50
Good luck.

Responsive Headers with Elm-UI

I am using elm-ui. The header feature is amazing, but does not seem to be responsive by default. I don't see anything about responsive design in the documents. Is there a way to implement this feature within the elm-ui ecosystem, or do you need to integrate it into bootstrap or something responsive?
I did a bit of digging around the elm-ui github repo, it looks like indeed there is no answer for the responsive bit. And in general, elm really doesn't have an answer for responsiveness (Excluding elm-style-elements). I'd reccomend using media queries.
Check out this article to get started.

Objective C get html page's links

I'm quite new in Objective C programming and I'm trying to make an application that returns all the link addresses in HTML page. In that case i shouldn't just parse the HTML, but get these links intercepting them from the page's network request.
Is it possible to intercept the application's network requests or something?
Thanks
Coincidentally, Ray Wenderlich's rather AWESOME iOS tutorial site posted this article in the last hour. As you are new to iOS/ObjC, I highly recommend reading it thoroughly.
Let’s say you want to find some information inside a web page and
display it in a custom way in your app.
This technique is called
“scraping.” Let’s also assume you’ve thought through alternatives to
scraping web pages from inside your app, and are pretty sure that’s
what you want to do.
Well then you get to the question – how can you
programmatically dig through the HTML and find the part you’re looking
for, in the most robust way possible? Believe it or not, regular
expressions won’t cut it!
And before you think Regular Expressions might really be an answer, please read this.