Skip to content

Instantly share code, notes, and snippets.

@ialeke

ialeke/app.js

Last active Apr 8, 2021
Embed
What would you like to do?
Using Phoenix Router and Vue Router
// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import "../css/app.scss";
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import deps with the dep name or local files with a relative path, for example:
//
// import {Socket} from "phoenix"
// import socket from "./socket"
//
import "phoenix_html";
import Vue from "vue";
import App from "../vue/App.vue";
import router from "../vue/router/index";
// new Vue({
// router,
// render: (h) => h(App),
// }).$mount("#app");
new Vue({ el: "#app", router});
<main role="main" id="app">
<app assigns="<%= @assigns %>"></app>
</main>
defmodule Project.Web.Router do
use Project.Web, :router
pipeline :browser do
plug :accepts, ["html", "json"]
plug :fetch_session
plug :fetch_flash
plug :protect_from_forgery
end
pipeline :api do
plug :accepts, ["json"]
plug :fetch_session
end
scope "/", Project.Web do
pipe_through :browser
get "/", PageController, :index
end
scope "/path1", Project.Web do
pipe_through :browser
get "/*path", PageController, :can_be_some_other_func
end
scope "/path2", Project.Web do
pipe_through :browser
get "/*path", PageController, :can_be_some_other_func
end
end
export default [
{
path: "/path1",
component: () => import("../views/Path1.vue"),
children: [
{
path: "subpath",
name: "path1_subpath",
component: () => import("../components/Path1/SubPath.vue"),
}
]
},
{
path: "/path2",
component: () => import("../views/Path2.vue"),
children: [
{
path: "subpath",
name: "path2_subpath",
component: () => import("../components/Path2/SubPath.vue"),
}
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment