How can I pull Vue Router pages from the server? - javascript

I'm building an Electron app that needs to have multiple pages. I've looked at Vue Router (I'm already using Vue) as a routing system, but I'd like to store every page a a separate HTML file.
I've tried a couple of things:
Making an Ajax request to the page, then putting its contents into the route. When trying to navigate to the route, I got a route not allowed error.
Making an Ajax request to the page, then replacing the #app element's contents with the requested page. This caused the {{ template_things }} to stop working.
I'm open to using other routing systems, too. Vue Router just seemed the most convenient.
Thank you!

You could try out Nuxt.JS.
The big innovation of Nuxt.js comes with the nuxt generate command.
When building your application, it will generate the HTML for every one of your routes and store it in a file.
For example, the following file structure:
-| pages/
----| about.vue
----| index.vue
Will generate:
-| dist/
----| about/
------| index.html
----| index.html
There is an Electron starter app with Nuxt on GitHub

Related

How to compile vue components from cshtml files without messing up renderbody?

Got an EpiServer project where I want to insert .vue components.
I have tried to follow this project, where they can render .vue components from their cshtml files dynamically: [https://github.com/episerver/musicfestival-vue-template][1]
Currently approaching the problem by adding the built app and chunk-vendor js files into the project folder of the C# project and inject the scripts and id’s. Unfortunately, the Vue project takes over the whole app container.
The ideal scenario is to simply add vue components (from the Vue 3 Cli project), into the project like: <hello-world></hello-world>, without it interfering with the renderbody.
So, how do I compile .vue components from cshtml files, while renderbody works as usual?

How to redirect Vue/Nuxt SPA Page automatically

Summery
I'm creating Vue/Nuxt application by SPA mode.
To generate /.dist file, I execute nuxt generate
pages
├ index.vue
└ test.vue
I want to know how to redirect / to /test path by Nuxt.
What I tried
I tried middleware and module, but they do not work.
https://github.com/nuxt-community/redirect-module
One simple workaround is to use fetch hook in the index page to change rout to /test; Here is the code:
// index.vue
fetch() {
this.$router.push('./test');
}

Meteor.js with React - Why does the html page not render when I use .jsx, it only renders with .js

I am following the official tutorial from this link:
https://www.meteor.com/tutorials/react/components
I created my own project with a command in the terminal:
meteor create --react new-react-app
The command generated the file structure like in the tutorial only instead of getting imports/ui/App.js and /imports/ui/Task.js I got App.jsx and Task.jsx.
The problem is that the html file does not render the list when I start the server. Only if I change those files in a regular .js it works. Why?
Shouldn't we use .jsx, afterall I have chosen the project with React.js?

Remote view html files in Kendo UI Mobile

I have created an sample hybrid app using telerik app builder CLI. The project loads an initial home screen from a COMPONENTS folder in the project. Now i have Home folder with an index.js and view.html in it and the Home folder is inside Components. I added About folder with an index.js and view.html in it.
Both view.html have a div inside it. Now i need to know how to navigate from home to about. This has to happen from the JS. I tried
var app = new kendo.mobile.Application();
app.navigate("#AboutView");
"#AboutView" is the id of the div in view.html in About folder. This doesn't work. Could someone provide any help
with remote views ... you will need to provide the full path. and the reference is always from the root of the project. so in your case it will be
components/About/view.html
http://docs.telerik.com/kendo-ui/mobile/application#remote-views

Serving ember app from IIS resulting in UnrecognizedURLError

I am trying to serve an ember app from IIS.
I created a new app using ember new my-app and then ran ember build --environment production. This generated the files in the dist directory as expected.
On the IIS side, I added a new website on the server and mapped the dist folder from the last step.
Now, when I navigate to localhost/index.html I get a blank page.
I checked the source of the page and the js files are being served correctly as expected. This would mean that it's the templates that are not being retrieved correctly. In the chrome inspector console there is an exception which says Uncaught: UnrecognizedURLError: /index.html. The ember inspector says 'Ember application not detected!'.
I've tried the solutions mentioned here, but none has worked for me.
Has anyone else experienced this problem/know how to fix this?
Ember Router uses location: history by default. This means, it assumes that /index.html is your route. But obviously it's not defined so the router throws UnrecognizedURLError.
There are several solutions for your problem:
Set locationType: 'hash' in config/environment.js of your ember application. This will force Ember router to use # in url for routing and in your case this would be like localhost/index.html#your/route.
Configure your IIS instance to handle index.html as a default document. To do this, open your server config and make sure it has the key:
Change ember build config to produce index.aspx instead of index.html. You can read about it here.

Categories

Resources