Applaying Framework7 with Remix.js #4297

AhmadFox · 2024-11-13T12:29:42Z

Overview

Hello Folks,
I'm trying to apply Framework7 latest version [v8.3.4] to my Remix.js app, i do all nesessry things from boath side (remix and framework7) and it's working with remix router issue

Explain the project Remix.js file

app/root.tsx
app/routers/_index.tsx
app/routers/about.tsx

let's take a look how this file look like with the code:

for full code overview take a look to this code repo: []

1- root.tsx:

import {
	Links,
	Meta,
	Scripts,
	Outlet,
	ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";

// Import F7 Bundle and React Plugin
import Framework7 from 'framework7/lite-bundle';
import Framework7React, { App, View } from 'framework7-react';


import AboutPage from './routes/about';
import HomePage from './routes/_index';


// Initialize Framework7 with the React plugin globally
Framework7.use(Framework7React);

// Framework7 module styles
import '../node_modules/framework7/framework7-bundle.css'

export const links: LinksFunction = () => [
	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
	{
		rel: "preconnect",
		href: "https://fonts.gstatic.com",
		crossOrigin: "anonymous",
	},
	{
		rel: "stylesheet",
		href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
	},
];

export function Layout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="en">
			<head>
				<meta charSet="utf-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<Meta />
				<Links />
			</head>
			<body>
				{children}
				<ScrollRestoration />
				<Scripts />
			</body>
		</html>
	);
}

const f7params = {
	name: 'My App',
	// routes
	routes: [
		{
			path: '/',
			component: HomePage,
		},
		{
			path: '/about/',
			component: AboutPage,
		},
	],
	// ... other params
}

export default function MyApp() {
	return (
		<App theme="auto" {...f7params}>
			{/* Main View component with "main" prop */}
			<View main url="/ss">
				{/* This renders nested routes via Outlet */}
				<Outlet />
			</View>
		</App>
	);
}

2- _index.tsx: (as home page with route '/')

import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";
import { Navbar, Page } from 'framework7-react';

export const meta: MetaFunction = () => {
	return [
		{ title: "New Remix App" },
		{ name: "description", content: "Welcome to Remix!" },
	];
};

export default function Index() {
	return (
		// Main Framework7 App component where we pass Framework7 params
		<Page>
			<Navbar title="Home" />
			<p>Welcome to the Home Page</p>
			<Link to="/about/">About Page</Link>
		</Page>
	);
}

3- about.tsx: (as home page with route '/about')

import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";
import { Page, Navbar } from 'framework7-react';

export const meta: MetaFunction = () => {
	return [
		{ title: "Remix App - About" },
		{ name: "description", content: "Welcome to About Page!" },
	];
};

const about = () => {
  return (
	<Page>
		{/* Top Navbar */}
		<Navbar title="About"></Navbar>
		{/* Page Content */}
		<p>Page About</p>
		<Link to="/">Home</Link>
	</Page>
  )
}

export default about

I was wondering how to make router in Framework7 compatible with Remix
this is working but url not updated on my browser

The text was updated successfully, but these errors were encountered:

AhmadFox · 2024-11-13T12:35:33Z

@nolimits4web Big thanks for Vladimir Kharlampidi about this big gift for building this amazing and fastes open source framework to develop mobile, desktop or web apps with native look and feel .

AhmadFox changed the title ~~Applaying Framework7 with Remix.js framework~~ Applaying Framework7 with Remix.js Nov 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Applaying Framework7 with Remix.js #4297

Applaying Framework7 with Remix.js #4297

AhmadFox commented Nov 13, 2024 •

edited

Loading

AhmadFox commented Nov 13, 2024

Applaying Framework7 with Remix.js #4297

Applaying Framework7 with Remix.js #4297

Comments

AhmadFox commented Nov 13, 2024 • edited Loading

Overview

Explain the project Remix.js file

1- root.tsx:

2- _index.tsx: (as home page with route '/')

3- about.tsx: (as home page with route '/about')

AhmadFox commented Nov 13, 2024

AhmadFox commented Nov 13, 2024 •

edited

Loading