Vue just revamped its core and its primary router and since I'm just starting out using 2.0 and the Vue Router 2.0, there are a number of tutorials that reference older versions of either, and what I HAVE found is that the app structure varies wildly from boilerplate to boilerplate.
My question is this - what's the proper way to structure my Vue app while at the same time being able to leverage the new 2.0 router using nested navigation.
Thanks in advance.
Also, I've looked through the docs pretty closely and there seems like there are a ton of gaps - not sure if that's on purpose or the documentation just happens to be really thin.
Lastly, if it helps, I'm building a website that will have some application structure mixed in with it - making service calls to JSON data mostly and then populating tables with that JSON data.
Related
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.
I'm wondering if there's someone knowledgeable in Vue(2 or 3)'s reactivity that might be able to answer this question and explain reasons.
This is regarding features such as data() reactivity (getters & setters), computed properties, a global Vue instance, and even a Vuex store.
Is there a way I could tap into just these non-browser javascript features for use in a backend-only Node.js application?
I need a way to have a global store holding temporary data that can update "components" in other files via mapState/mapGetters.
I'm using lowdb currently for this because it suits my needs in terms of shapeable JSON objects, where something like redis is key:value-only. (Don't want to get into a more complex redis/rejson setup.)
Basically I need a globally accessible relatively-full-featured reactivity system on the backend, without global variables or needing to set up a custom Rxjs system, which is a bit over my head and will take too much momentum away from my goals, time-wise.
I'd appreciate any input. Thanks 🙂
Vue is designed to run inside Node to support SSR (server side rendering). There is already a good post here on SO with simple sample for Vue 2 (using Vue + Vuex)
But it seems overkill to me. If you want something much simpler and lightweight, you can use package #vue/reactivity which is normally part of the Vue 3 but can be used completely standalone. It is basically Vue 3 reactivity system based on JS proxies
Why would I choose this approach:
No Vue 2 Change Detection Caveats
More "functional" API (designed for their new Composition API) with much better support for TypeScript and type inference (even without TS)
I think Vuex API is super bad (using string constants for data mapping - especially with modules. It's pain...)
As it is part of Vue 3, you can use it's documentation:
Basic Reactivity APIs
Refs
I've currently got a library of Vue2 components I've created and use in several projects via a private npm repo. I'm starting a new project now in Vue3 but I'd like to use the old components if possible. Can I mix versions like that? Also, can components be mixed the opposite way (Vue3 components in Vue2 apps)?
Vue2 components can be used with Vue3 and Vue3 components can be used in Vue2.
HOWEVER...
As long as you use Classic Vue Js class-based API you should have no issues. Even though some of the underlying technology has been rebuilt, the Vue team has worked hard on making that compatible, though I'm sure there will be some edge cases here and there.
The problem will be if you use the Composition API in making your components. The composition API is built for Vue3, and although you can have a similar experience in Vue2 via a plugin, you are likely going to encounter issues.
Furthermore, even if you are not using the Composition API, you may end up using plugins that do rely on it, which may end up not regression testing against Vue2.
Vue3 is still in RC
At the time of writing, Vue 3 was still being released as a RC version. This may change very soon, there's not guarantee.
If you're going to use Vue3 the same way as Vue2, there's little benefit to switching. If you are going to use the new features (like the Composition API) then you might end up not being 100% compatible.
list of breaking changes
https://v3-migration.vuejs.org/breaking-changes/introduction.html#breaking
By the sounds of it, Vue2 will have another (LTS) release that will address compatibility issues.
The official recommendation is to start new projects with Vue2 still.
My backend exposes graphql wanted to know what is your experience with aurelia and graphql.
Are there any good libraries out there to use?
I could only find a minimal apollo bind library here https://github.com/stphdenis/aurelia-apollo-bind
Aurelia does not impose any restrictions. From examples I see in graphql docs there is nothing you can't do with Aurelia.
There is no need in specific bridge or wrapper library.
I suppose you can use this Angular 9 sample https://www.youtube.com/watch?v=GifdPhc_OWU
You will need the same GraphQL queries generator. And a similar way of calling a back-end.
I guess it is even possible to write content item templates in Aurelia syntax in place of Liquid templates of content type definitions, gather them to front-end along with JSON and render together. I would try to achieve that.
I have been trying Vue.js with ASP.Net Core for the last week and it seems quite powerful.
However, I have seen different approaches in the way how files are organized and modules written.
In the javascript spatemplate, they use, I would say this structure with ts, html, css files:
|_components
|_counter
*counter.ts
*counter.css
*counter.html
In other starter Vue.js templates, we have this structure with one single vue file:
|_components
|_counter.vue
Is there a limitation/advantage in using one over the other? Is one being more recent and should superseed the other format?
I have also see that they are different way of writing component for Vue in Typescript.
The default one presented on the Vue website and the other way using the vue-class-component or the vue-property-decorator which looks more natural to me and is recommended on the Vue website as it seems to solve some issues: link.
Again if it is that good, why shouldn't it become the standard? Does the default style gives more flexibility compared with the 'vue-class-component' style?
Sorry for the basic questions, just trying to get the good directions from the beginning.