I'm trying to teach SPA in Laravel + Vue.
I have a few pretty simpe components.
<template>
<p>Home</p>
</template>
<script>
export default {
name: 'Home'
}
</script>
Also, I have a router file
import Home from '../pages/home.vue';
import Profile from '../pages/profile.vue';
export let routes = [
{
path : '/home',
component : Home
},
{
path : '/profile',
component : Profile
}
];
npm run dev - "build successfull"
I've attached router-link tags and placed router-view.
But there is just . It's gives the same result with "out of the box" Laravel example-component.vue .
It seems there is somethng wrong with import settings in my component, but what?
The problem was in the project structure.
I have a router/routes.js and app.js file
In app.js I import routes from routes.js and do new VueRouter.
The error was:
import {routes} from './router/routes';
let router = new VueRouter(routes);
Should be
import {routes} from './router/routes';
let router = new VueRouter({routes});
Related
I seem to be having issues getting react-router working within a Symfony 6 installation inside a sub-directory.
The react router keeps throwing a 404 error for all routes:
> Object { status: 404, statusText: "Not Found", internal: true, data:
> "Error: No route matches URL \"/work/ls/public/\"", error: Error }
> app.0e8e7ca1.js:1:507
I have installed Symfony, WebPackEncoreBundle and created a ReactController and Twig template:
<?php
// src/Controller/ReactController.php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
class ReactController extends AbstractController
{
public function number(): Response
{
return $this->render('react/index.html.twig');
}
}
The YAML route file is as follows:
react_controller:
path: /{reactRouting}
controller: App\Controller\ReactController::number
defaults: { reactRouting: null }
Within webpack.config.js I have the following settings:
// enable react present
.enableReactPreset()
// directory where compiled assets will be stored
.setOutputPath('public/build')
// public path used by the web server to access the output path
.setPublicPath('/work/ls/public/build')
I've also tried adding "homepage" to package.json:
"homepage": "http://localhost/work/ls"
React code below:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Dashboard from './components/Dashboard';
import Login from './components/Login';
import ErrorPage from './components/ErrorPage';
// Import router
import { createBrowserRouter, RouterProvider, useLocation } from 'react-router-dom';
const router = createBrowserRouter([
{
path: "/",
element: <Dashboard />,
errorElement: <ErrorPage />
},
{
path: "/login",
element: <Login />
}
]);
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
When creating a new React project separately from Symfony at the root directory, using the same code, the routing works as expected.
Can anyone see where I am going wrong?
I'm currently building an app and I would like to add extensions to this app. These extensions should have their own Vue components and and views (and thus also routes). I don't want to rebuild the app but instead add the new views and routes dynamically. Is there a good way to do that with Vue 2?
In the following I added the files that I hope makes this question a bit more comprehensible. The router/index.js contains the basic structure and is added to the main.js file in the regular fashion. During the load of the app.vue the new routes should be loaded and appended to the already existing ones.
router
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link>
</div>
<router-view/>
</div>
</template>
<script>
// # is an alias to /src
import TestView from '#/views/Test.vue'
export default {
name: 'Home',
components: {},
created() {
<add route to router>({
component: TestView,
name: "Test",
path: "/test"
})
}
}
</script>
I used the phrase <add route to router> to demonstrate the way I would like to add the route. After the route is added the user should be able to directly navigate to the new view using <router-link to="/test">Test</router-link>.
Any help would be appreciated.
Use addRoute to add routes at runtime. Here is the explanation for this method from the docs:
Add a new route to the router. If the route has a name and there is already an existing one with the same one, it overwrites it.
Import the router into App.vue to use it:
App.vue
<script>
import router from './router/index.js';
import TestView from '#/views/Test.vue'
export default {
created() {
router.addRoute({
component: TestView,
name: "Test",
path: "/test"
})
}
}
</script>
TLDR: Ive nested a component into a views folder and it wont show, I believe I have imported it correctly and think I'm missing something / any help here would be great
im importing a component into a views file which is then to be displayed via the vue router - the issue is the component or view does not show -
Oddly this code works if I ask the router to display the component as a stand alone, but not when I nest the component into the views file:
File structure is:
VIEWS FILE importing the component to be nested inside of it:
src/views/Contact.vue <<<< i imagine I have an issue here but I cannot seem to figure this out
<template>
<div class="contact_container">
<Contact/>
</div>
</template>
<script>
import Contact from '#/components/Contact.vue'
export default {
name: 'Contact',
components: {
Contact
}
}
</script>
Component file
src/components/Contact.vue
<template>
<div>
<h1>Welcome to the contact page</h1>
</div>
</template>
<script>
export default {
name: 'Contact',
data(){
return{
}
}
}
</script>
Views Router File:
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
const router = new VueRouter({
routes
})
export default router
and finally App.veu
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/contact">Contact</router-link>
</div>
<router-view/>
</div>
</template>
/// UPDATED ///
In the code below - what does the name property do?
(the code below is defining a component)
<template>
<div>
<h1>Welcome to the contact page</h1>
</div>
</template>
<script>
export default {
name: 'Contact-Component', <<<< what does this do?
data(){
return{
}
}
}
</script>
The reason why i'm a little lost here is because when we use this component we import it into another file using the below:
import Contact from '../views/Contact.vue'
In that process we have defined the component as Contact (so it is not referenced by its name any more) .... so why did we define a name?
If there is any documentation on this that would be amazing and while it seems like a silly question (and probably is) it is distracting me with curiosity...
Thanks for any help -
Wally
change your code with this
<template>
<div class="contact_container">
<Contact/>
</div>
</template>
<script>
import Contact from './components/Contact.vue'
export default {
name: 'Contact',
components: {
"Contact":contact
}
}
</script>
The name is used to allow the component to recursively invoke itself in its template. It also helps when debugging as it allows for a more helpful error message.
Have a read over this to get a better idea: https://v2.vuejs.org/v2/api/#name
You have to let the app know it's a Vue component:
<script lang="js">
import Vue from 'vue';
export default Vue.extend({
name: 'Contact',
...
});
I've read related sections of the book Full-Stack Vue.js 2 and Laravel 5 and browsed some questions (e.g. vuejs application with different layouts (e.g. login layout, page layout, signup etc.)) to solve this issue. But none of them helped me.
I've created a Laravel + Vue SPA which works great. But when I want to create an administrator dashboard for this SPA with different JavaScript and CSS resources (as the dashboard should have completely different styles), I've confused too much. I don't know and understand what kind of an algorithm I should follow to do this.
You can see the general view of the software below,
// app.js
require('./bootstrap');
import Vue from 'vue'
import App from './views/App'
import router from './router'
import store from './store'
// Layouts
import Default from './views/layouts/Default.vue'
import Dashboard from './views/layouts/Dashboard.vue'
Vue.component('default-layout', Default);
Vue.component('dashboard-layout', Dashboard);
Vue.config.productionTip = false
export default window.vue = new Vue({
el: 'app',
components: {
App
},
router,
store
});
// App.vue
<template>
<div>
<component :is="layout">
<router-view/>
</component>
</div>
</template>
<script>
import $ from 'jquery';
window.$ = window.jQuery = $;
const default_layout = 'default';
export default {
name: 'App',
computed: {
layout() {
return (this.$route.meta.layout || default_layout) + '-layout';
}
},
};
</script>
// Default Layout
<template>
<div>
<default-navigation :is-absolute="isAbsolute" />
<slot/>
<default-footer />
</div>
</template>
<script>
import DefaultNavigation from '../components/DefaultNavigation.vue';
import DefaultFooter from '../components/DefaultFooter.vue';
export default {
name: 'Default',
components: {
DefaultNavigation,
DefaultFooter,
},
computed: {
isAbsolute() {
if (this.$route.name == 'home') {
return true;
}
}
},
};
</script>
// Dashboard Layout
<template>
<div>
<!-- Nothing here yet. -->
</div>
</template>
<script>
import DHeader from '../components/Dashboard/Header.vue';
import DSidebar from '../components/Dashboard/Sidebar.vue';
import DTitle from '../components/Dashboard/Title.vue';
export default {
name: 'Dashboard',
components: {
DHeader,
DSidebar,
DTitle
},
};
</script>
// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.js('resources/js/dashboard.js', 'public/js')
.sass('resources/sass/dashboard.scss', 'public/css');
What should I do to use a totally different style file and an extra JavaScript file in the dashboard layout?
If you're looking for separate Vue instances for both, then you can follow this
Create separate blade templates for both the instances. Add separate routes for both templates.
Route::get('/dashboard/{any?}', function () {
return view('dashboard');
})->where('any', '[\/\w\.-]*');
Route::get('/{any?}', function () {
return view('index');
})->where('any', '[\/\w\.-]*');
Create two Vue instances in separate js files, say app.js and dashboard.js. You can create this in another directory like dashboard/dashboard.js
Update your webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.js('resources/dashboard/dashboard.js', 'public/js')
.sass('resources/sass/dashboard.scss', 'public/css');
You can link the build files in public to the corresponding blade templates.
I'm creating a Laravel website that will be a single page application. I'm new to VueJS even if I have experience with javascript in general.
I need to display several routes, such as /blog/new, /blog/:id, /blog/edit, etc. /blog itself is defined by Laravel, and works as the blog index.
I installed vue-router, and tried to follow some examples I saw but nothing happens:
app.js
import './bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
const blogIndex = { template: require('./components/blog/index.vue') };
const blogNew = { template: require('./components/blog/new.vue')};
const routes = [
{
path: '/blog',
component: blogIndex,
name: 'blog-index'
},
{
path: '/blog/new',
component: blogNew,
name: 'blog-new'
}
];
const router = new VueRouter({
routes,
mode: "history"
});
Vue.use(VueRouter);
Vue.component('example', require('./components/Example.vue'));
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('blog_index', require('./components/blog/index.vue'));
console.log(testvar);
const app = new Vue({
router
}).$mount('#app');
components/blog/index.vue
<template>
<div>
<h1>Blog index</h1>
<router-link :to="{ name: 'blog-new' }">New article</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
mounted() {
console.log('blog#index mounted');
}
}
</script>
components/blog/new.vue
<template>
<h2>Here is blog/new y'all</h2>
</template>
<script>
export default {
mounted() {
console.log('blog#new mounted');
}
}
</script>
So far, the only thing that works is my address bar that gets modified, but the template itself doesn't seem to be loaded (I go from /blog to /blog/new).
I've seen that I need add <router-view></router-view> in my html file, but this triggers an error and blocks VueJS's display.
My question is: what am I missing, or what did I do wrong?
Thank you in advance
You need to use <router-view></router-view> in your main App.vue file, which is the part that new routes are loaded into.
<template>
<router-view></router-view>
</template>
You currently state you have this in components/blog/index.vue - which I believe is just for your nested routes. https://router.vuejs.org/en/essentials/nested-routes.html