I want to use VueJS with .NET Core Razor pages.
boot.ts
import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: require('./components/home/home.vue.html') },
{ path: '/counter', component: require('./components/counter/counter.vue.html') },
{ path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.cshtml') }
];
new Vue({
el: '#app-root',
router: new VueRouter({ mode: 'history', routes: routes }),
render: h => h(require('./components/app/app.vue.html'))
});
Notice the fetchdata.vue.cshtml in the code above. When I run the application, I get the following error:
ERROR in ./ClientApp/components/fetchdata/fetchdata.vue.cshtml
Module parse failed: .\NetCoreVueJs\ClientApp\components\fetchdata\fetchdata.vue.cshtml Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div>
| <h1>Weather forecast</h1>
# ./ClientApp/boot.ts 9:37-91
# multi event-source-polyfill webpack-hot-middleware/client?
path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts
Is it possible to use .cshtml files as components in VueJS?
Yes, you can use Vue in your razor pages, but I think you're approaching it in the wrong way. Remember that the .cshtml files are compiled in the backend side into html markup that is sent to the browser.
If you want to use razor views you will have to mount your VueJS code on the HTML that is generated and sent to the browser. See [his example I created on Codepen to illustrate this, I'm using Pug to mimic something that generates the HTML template and once it is generated I mount Vue JS on it. https://codepen.io/jaireina/pen/MNvvgd
Pug
#app
input(type="text", placeholder="type your name", v-model="name")
each val in [1,2,3]
p.name {{name}}
JS
var app = new Vue({
el: '#app',
data: {
name: ''
}
})
You won't be able to use Vue in the way you're trying, as a single page application and passing it the cshtml files as templates. If you really need to use razor views you can do something to what I mentioned before. But if you want to create a SPA, I would recommend creating an API with .NET and having your Vue app consuming that API.
I hope this helps.
Related
I have a non SPA (multi page application). On one page I use a vue.js component with multiple tabs. I control those tabs with VueRouter. it all works well very well actually.
I am using vue 2 and vue-router 3.
I define the Router directly in the single file component like this.
<script>
// import Vue from 'vue';
import VueRouter from 'vue-router';
export default {
name: 'ProductDisplay',
router: new VueRouter({
routes: [
{ name: 'offer', path: '/' },
{ name: 'posts', path: '/posts' },
{ name: 'reviews', path: '/reviews' }
],
}),
}
</script>
This tabbed component is imported globally because the entire multipage application is driven by a single app.js file compiled by webpack.
My problem is now, that even on pages, where this component is not used at all (only import ProductDisplay from product-display.vue is present), this new VueRouter({}) call affects the current URL by appending /#/ at the end.
e.g. loading my homepage https://www.example.com it ends up beeing https://www.example.com/#/
Just to clarify: this ProductDisplay component is NOT used on the homepage at all.
On the other hand, on the page where ProductDisplay is being used I expect the urls to be like this and it works well.
https://www.example.com/product#/
https://www.example.com/product#/posts
https://www.example.com/product#/reviews
Here is the entire JavaScript code (webpack + babel) loaded on the homepage if someone likes to analyze. https://pastebin.com/VAAvpfXA
Is there a way to avoid this behaviour, e.g. by explicitely activating/initiating a VueRouter object?
i want to show a custom html page while building my vue js project (npm run build)
as you know while building process dist folder not exists and after build process we have dist folder .
how can i show a custom page until build is completely done?
i found this answer in a forum but how can i use that?
i dont think this is proper way!
axios.interceptors.response.use(function (response) {
if ( response.status === 503 ) {
return to maintenance page
}
return response;
});
Hi can you explain what do you want to achieve. It seems you are using VUE version that is lower than VUE CLI 3. If you want a custom page (error page, static page, 404 page, redirection page and etc.) you can still use vue router. Adding a page after a build is not a good idea since there is no route for that when you already build your project. Install vue router, create a router file or if you already have router add this.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import PageNotFound from '#/views/pages/NotFoundPage'
import 404Page from '#/views/pages/404Page.vue'
import StaticPage from '#/views/pages/StaticPage'
const router = new Router({
routes: [
{
path: '/static',
name: 'Static Page',
component: StaticPage
},
{
path: '/404',
name: '404 Page',
component: 404Page
},
{
path: '*',
name: 'PageNotFound',
component: PageNotFound
}
]
})
export default router
You just need to redirect the user using these from your view files
this.$router.push('/static')
this.$router.push('/404')
if there are no matching route the user will automatically redirected to Page Not Found page
I'm trying (unsuccessfully) to pre-render the HTML of multiple Vue apps within the same project scaffolded with Vue CLI. I do not want to use Vue Router or Nuxt etc for multiple reasons.
I've tried using prerender-spa-plugin, but since I don't use routes, it only pre-renders the index.
My vue.config.js looks like this:
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
pages: {
index: 'src/index.js',
about: 'src/about.js',
},
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/'],
postProcess(route) {
route.html = route.html.replace('</script><div>', '</script><div id="app" data-server-rendered="true">');
return route;
},
renderer: new Renderer({
headless: true,
renderAfterDocumentEvent: 'render-event',
}),
}),
],
},
};
and my index.js and about.js essentially look like this:
import Vue from 'vue';
import App from './Index.vue';
new Vue({
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event'));
},
}).$mount('#app');
I also have unique public/ index.html and about.html pages.
The routes parameter of prerender-spa-plugin doesn't seem to recognise things like '/about.html'. Is there an easy way of achieving multiple pre-rendered pages?
Do I have to wrestle with the SSR module?
Thanks in advance.
The solution I've found is to call new PrerenderSPAPlugin multiple times, one for each route.
I'm also facing the same issue, i have static html uses vue component and i want to pre-render the vue component in output build directory. I'm using laravel-mix package for build process.
Could you post the full solution for this i.e calling new PrerenderSPAPlugin multiple times, one for each route.
If i can get the full webpack.config.js, it would easy for me to understand and implement the same using laravel-mix.
I'm a newbie in javascript and vue.js and I'm facing some issue when trying to add a new route in an existing programme.
I created my new component in a separate file called Miniature.vue
I added the new route in the router definition:
export default new Router({
routes: [
{
path: '/certificat/:id',
name: 'Certificat',
component: Certificat
},
{
path: '/miniature/:id',
name: 'Miniature',
component: Miniature
}
]
})
And then, in the vue instantiation, I added my new components and updated the template :
new Vue({
el: '#app',
router,
components: { Certificat, Miniature } ,
template: '<div>
<Certificat></Certificat>
<Miniature></Miniature>
</div>'
})
The previous template was simply
template: '<Certificat/>'
Problem is, the url is either mywebsite/certificat/123 or mywebsite/miniature/123, both routes are executed, and my two components are displayed !
What is the purpose of the template in the Vue constructor anyway? If I remove it, nothing happens.
What am I missing here ??
Those components are supposed to be loaded from your route, so they shouldn't be in your app template (i.e., they should be removed from #app's components and template).
Your app should contain <router-view> somewhere for the route to be rendered. In your case, replace the app template string with <router-view/>.
It should look similar to this:
new Vue({
el: '#app',
router,
template: '<router-view/>'
})
I should mention your router setup is missing a route for / and 404, so the default path and unknown routes will render nothing in your app. Users would have to navigate to the exact routes you've configured to see anything.
Vue doesn't have routing built-in, for routing you'll need the vue-router package.
To get a better understanding of template and Vue in general, I recommend reading the Introduction guide
So In my laravel app we have a url say
http://mywebsite.in/wfengine/search/
Now I want to use the laravel router to work on the above link , but nothing seems to be happening.
Router.js
import VueRouter from 'vue-router';
let routes = [
{
path:'/filters',
componenet: require('./views/filter')
}
];
export default new VueRouter({
routes
});
App.js
`import router from './routes';
// import './core/searchableCards';
var app = new Vue({
el:'#ep_result_1',
router
})`
HTML
<router-link to="/filters">Search Page</router-link>
Now on the page which is loaded by laravel , I get following url in the browser
http://mywebsite.in/wfengine/search/#filters
But the template is not loading , can anyone help me out with this
According to me the Vue Router is just doing some Dom hide and show so it should not be effected by the base url right ?
Vue router mounts the components (defined in the routes array).
So if you defined a laravel routes to wfengine/search/ for the (e.g.) search.blade.php there should be the <router-view></router-view> dom element, as the doc says.
After that you should define the vue-router:
const router = new VueRouter({
mode: 'history',
routes
})
The routes variable is the routes array, the mode is for use the vue routing without # (http://mywebsite.in/wfengine/search/#filters -> http://mywebsite.in/wfengine/search/filters).
After that you should register the url (wfengine/search/filters) in the web route in laravel, what is give back the search.blade.php or that "base page" what contains the <router-view> dom.
So 1. there should be a base php view, what contains the <router-view>.
2. Then register the urls in the server side what gives back the same base view. 3. Then the vue-router will decide which component should be loaded by the end of the url.
At the end of your routes/web.php file just put the below code. This tricks works for me.
// At the end of the file
Route::get('/{vue_capture?}', function () {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
Of course you have to put a <router-view></router-view> into your layout or blade file.