I am currently writing a small static site, and I have decided to use Vue.js as I have used it in the past without major issues. This time, I have to use a pre-made template which is jQuery/Bootstrap based and most of the heavy lifting is done through JS.
I am trying to use the Porto template. I have been able to convert the basics (CSS, add the router, etc) but I am struggling with the JS side of things. From what I have been able to understand, the different "components" that come from the template are activated once the entire page has been loaded. The init script goes through the HTML DOM and "activates" them.
Usually this works fine, especially when using an old jQuery style approach, but due to Vue's lifecycle for components, the JS is not re-executed once a new component appears on the page, therefore making it look like it does not work.
The most logical approach would be to take each Porto component, and splitting it out into Vue components, with their own JS, etc. But this means that any update to the template would require a full rewrite, without forgetting the amount of work to create the first version.
Currently, I have tried wrapping the <script> imports in a component, and inserting it into the page. My idea was to then use the this.$forceUpdate() method to force a re-render, but it fails.
Any other ideas?
Related
Is this achievable without a framework like Angular/React?
Problem I'm running into is I'm creating a blog and I want to minimize the amount of code I'm using and there's two things I'm looking at:
Changing text on each file
For example, for each blog page, they share the same features such as: header, footer, logo, etc.
However, imagine my blog has 100 posts and now I want to change the text of a link in the footer. This would be applied to every page and instead of going to each page and changing the footer manually, I'd like to be able to change it in one file (i.e. footer.html or footer.json) and it's applied to all the pages. I discovered handlebars.js and unless I'm mistaken, I could use this to achieve this problem I'm facing.
Minimizing page bloat
However, I would like to minimize the page even more. As far as I understand, using something like handlebars wouldn't allow me to shorten the amount of HTML code itself. I'd like to have one blog-post-template.html file and each time the user clicks a link to a post, it would use the blog-post-template.html file and the only thing that would change is the actual blog-post.
For example, in pseudocode for blog-post-template.html:
{header} (gets this from header.html)
{blog-post} (gets this from link attribute and searches for that blog-post-number in database)
{footer} (gets this from footer.html)
I'm pretty sure I know the Angular way of doing this through templating and components but since I decided to create this blog with vanilla JavaScript and possibly jQuery plugins, but I was wondering if this was achievable without using a framework like Angular since I've heard about Angular and SEO not getting along well with each other.
Or if it's more advisable to use a tool like Angular/React to create something like this in my example.
You don't need a JavaScript framework, but you will need to use JavaScript.
You can have your header and footer hard-coded as HTML as you say. But then you'll need a JavaScript function to run and grab the blog post from your headless CRM or database.
I'd just recommend using something like Next.js so you can have the nice tooling of a framework, and no SEO downsides.
If you'd like an SEO-friendly version of React, you could use Next.js or Gatsby. Angular, I think, has ahead-of-time compilation that might do the trick. Or you could check out the html template element
Cheers :)
I'm very new to Vue and have been given a task of looking at creating some Vue widgets that could be embedded in a couple of existing non Vue legacy web applications. The idea is that we would create a library of these widgets which could be then embedded in either of the legacy applications and eventually we might migrate the entire apps to Vue.
I've been searching for the best way forward and I am a bit confused. I guess these are my questions:
Do I need to be thinking Web Components here or can the widgets be actual Vue applications that we embed somehow?
If the widgets should be created as Web Components is there any difference between using the Vue/web-component-wrapper or the vue-custom-element library?
Whichever option we choose can we make full use of features that you would use in any normal Vue application - Vue router, Vuex for state management etc (and can state be shared across those widgets)?
Would the widgets need to be fully styled or would it be best practice to leave all the styling of the components to the parent app (or a combination of the two)?
I've never done anything like this before (as you can probably tell!) so any guidance or advice or pointers to examples would be appreciated.
** Update **
I found this article which I think is the direction I need to go in https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97
There are three distinct (but quite similar) cases:
web components
They are supposed to be an encapsulated web fragment. If you want, it's a smarter alternative to <iframe>s. Its main use case (and what it was designed for) is to display ads in a page and guarantee the host can't mess with its internal logic and rendering.
custom elements
These are, simply put, declared and registered custom HTML tags. The advantage of using them is being able to mark them as off-limits in any outer framework, stating: "this custom element is not one of your custom components, treat it as an HTML tag".
framework components
By default, modern JS frameworks (Angular, React, Vue) use this pattern internally: their internal components look like custom elements (case 2). But they are not. They are just internal conventions, without ever making it into the HTML markup output of the app.
Here's what happens internally: when the template is parsed, if an unknown HTML element is met, the framework assumes it's one of its registered components. If it is, the tag is not rendered. A new instance of that component is created and the tag is replaced with the contents of the component's template (or the result of its render function).
All of the above frameworks, when running into an unknown html tag that is not a registered custom component will issue a warning along the lines of "hey, did you forget to register this component?". Unless it's registered as a custom element (case 2) - in which case they treat it as as such: an HTML tag.
Vue handles all of the above with grace. What you choose for your widgets largely depends on context and desired end result.
Here are the answers to your questions:
Do I need to be thinking Web Components here or can the widgets be actual Vue applications that we embed somehow?
You shouldn't go with Web Components if you want to be able to style them from the context.
If the widgets should be created as Web Components is there any difference between using the #vue/web-component-wrapper or the vue-custom-element library?
Yes, there is. #vue/web-component-wrapper produces web components (encapsulated DOM framents).
vue-custom-elements declares and uses custom elements (custom HTML tags). Their content is HTML markup (not encapsulated). The advantage of using custom elements is being able to inform outer frameworks: don't treat this custom element as one of your own components, it's handled by something else (Vue, in our case). Treat it as HTML markup.
Whichever option we choose can we make full use of features that you would use in any normal Vue application - Vue router, Vuex for state management etc (and can state be shared across those widgets)?
Yes. Whichever option you choose, you're still using JavaScript (every widget/app has unrestricted access to the entire context). You can also inject dependencies into your widgets, allowing them to communicate (by modifying the same external dependency - a router, a state management module, etc...). This is pretty much the standard mode in which every Vue instance normally operates. In simpler words, a Vue (sub-)component can function without a parent component and is, essentially, a Vue app. (or, if you prefer, every Vue app is a Vue instance and all of its sub-components are also Vue instances).
Would the widgets need to be fully styled or would it be best practice to leave all the styling of the components to the parent app (or a combination of the two)?
It's entirely your code design choice. It's easy to scope CSS in Vue. But there are great advantages in styling from above (DRY-er code). Also, having styles coming from context means less CSS rules applying, although that hardly qualifies as a performance issue. Obviously, take into consideration the answer to the first question.
I have been looking for a few hours for something that could help my problem, but as of now, I havent found it.
The problem is:
I am working on an PHP/Latte server-side rendered website, where I have decided to implement Vue. However, since there is no possibility for me to change this website into an SPA, I need to just create micro components with Vue and use them inside the BE templates.
By that I mean that there is a .latte template, where I insert a <My_component /> element, which gets rendered client side.
Which is fine for some components, but others, like the main menu, product or something else important for SEO purposes, needs to be somehow pre-rendered for crawlers.
By now I have read 10+ articles and watched 4 videos on prerender-spa-plugin, which I am sure is a great solution for SPAs, but I dont think it would work for my case. Especially since I am not using Vue router.
Nuxt.js also seems like not what I want and would be a bit of an overkill in my case.
Basically I just need a webpack or Node based plugin, that would take .vue files, that I would need to be pre-rendered, and create (build) the static HTML for them. Which would be either automatically or by hand inserted into the .latte template.
Has anyone had any experience with this?
I made some SPA using vuejs-templates/webpack and that's ok. But now I am developing a website, almost everything is static, so there's no need to be a SPA. I already made the pure html/css layout.
Now I will make some pages with forms and dynamic content, I would like to use vue components inside these pages.
Tell me which of this ideas is the best or give me a better option:
Multiple entries in webpack: I don't know very well how to do it, but I guess I can create a webpack project by scratch and render multiple entries that I include in the pages I want.
Use browserify: I didn't want to do this, but sounds like a good option... I could use vueify to render *.vue components
Use Nuxt: I never tried, but seems a good option too, I could make a "SPA" with SSR.
Tell me if you have another idea.
Thank you
Don't rule out just referencing Vue as a script file. No bundle, no compilation step. You lose single file components, but you can get something very like them by using js template literals. If your needs are simple and you don't want to impact on the rest of the site, this could be a fine solution.
My team developed a django website with lot of pages that working completely without javascript or may be with the little jquery manipulation. We want try to use a react library to speed up our pages and add page navigation without full page reloading (we choose react because we implemented some SPA website with react and we like it). Also our pages should working with disable js.
I want to start with one page with 5 forms on it. If any form is submit then page is reloaded, data populated in fields is lost and it work slowly. I think to implementing sending data on ajax and change some html after server answer.
Every react tutorial is saying to write jsx components with html markup inside, convert it with babel to pure js and adding on page dynamically on page load. Or if you want to render pages on server you need to use standalone node server. But I already has a powerfull django template engine to render templates on server side, also I need to render templates with specific django things like multilanguage content, user variables etc.
Can I fully render page with django on server side and after loading say to react, that specific div it's a component with initial state and existing html markup? Or may be you can tell me another solution, without fully rewriting my website. Thanks.
Well, kind of. Every react app starts by specifying a root HTML element to render from. If you want to only render a portion of your website with react, just specify an element that covers the section that you want. Something like this:
ReactDOM.render(<MyMainComponent />, document.getElementById('myReactSection'));
However, in doing so, any existing HTML in there will be overwritten (https://facebook.github.io/react/docs/react-dom.html#render). So you'll need React to re-render the html that was already in there.
Also, you don't NEED babel to write react code, it's just very useful (in conjunction with webpack) to generate a single javascript bundle file to send over to the client that was originally written using the awesome new ES6 syntax (https://babeljs.io/learn-es2015/)