<p>In case someone uses Craft 3, this should work:</p>

<p><code>&lt;?
return array(
    '&lt;url:(?!api\/).*&gt;' =&gt; ['template' =&gt; 'index']
);
</code></p>

CC BY-SA 3.0
2017-12-02T14:50:37.010Z
2017-12-02T14:50:37.010Z
David B.
<p>Not sure why Davids solution doesn't work for me, I'm using the following (Craft 3.2.8):</p>

<pre><code>return [
    '&lt;url:(?!api\b)\b\w+&gt;' =&gt; ['template' =&gt; 'index'],
];
</code></pre>

CC BY-SA 4.0
2019-08-12T07:21:45.717Z
2019-08-12T07:21:45.717Z
Paul van Kaam
<p>To pull this off, first you’ll have to make sure all of your Element API endpoints begin with something consistent, like <code>api/</code> or <code>data/</code>, etc.</p>

<p>Then create a route in <code>craft/config/routes.php</code> that will match everything besides those Element API endpoints:</p>

<pre class="lang-php prettyprint-override"><code>&lt;?php

return array(
    '(?!api\/).*' =&gt; 'index'
);
</code></pre>

<p><code>'index</code>' is the template path the requests should be routed to, so tweak that if needed.</p>

<p>If you have any other routes defined in there, make sure they go before this one.</p>

<blockquote>
  <p>I should add I have user registration and aspects that vue can't handle because Craft doesn't have a full crud api.</p>
</blockquote>

<p>You can use the same controller actions the Control Panel uses. There are a few examples, including <a href="https://craftcms.com/docs/templating/user-registration-form" rel="nofollow noreferrer">user registration</a> at the bottom of the templating docs.</p>

<p>If you want to keep these handled by custom pages, you’ll need to add routes for them in <code>routes.php</code>, or else they will stop working due to that new catchall route. Craft only attempts its default behavior of matching the URI to a public template as a last resort; if a route matches the URI, that route will take precedence.</p>

CC BY-SA 3.0
2017-03-05T18:17:06.217Z
ah, looks like that'll burst the Element API endpoints though, do I have any other options?
Steven Grant
CC BY-SA 3.0
2017-03-06T17:36:39.067Z
looks like the way around this is to do `post/(?P<slug>[^\/]+)\/(?P<number>\d+)` - ideally I'd like to drop `post` but this will do for now
Steven Grant
CC BY-SA 3.0
2017-03-06T18:09:05.223Z
@StevenGrant Ah, right. Just updated the route example to ignore Element API endpoints (assuming you can give all your endpoints a consistent prefix, e.g. `api/`).
Brandon Kelly
CC BY-SA 3.0
2017-04-13T23:09:38.027Z
Looks like I jumped the gun a little here. Despite having the route example you've given, I'm still managing to 404 when I try visit any URL other than the home page or the API endpoints.
Steven Grant
CC BY-SA 3.0
2017-04-14T12:19:59.673Z
Do you have an `index` template? (`index.html` or `index.twig`)
Brandon Kelly
CC BY-SA 3.0
2017-04-14T12:47:42.553Z
That has been my experience with route 404s too. After banging my head for a while, I find an error with the template I entered.
Jacob Graf
CC BY-SA 3.0
2017-04-14T12:53:07.823Z
yeah, `index.twig` which works fine for the home page. Can't see any errors with the template either and given it works on home, should work for others.
Steven Grant
CC BY-SA 3.0
2017-04-14T13:06:00.910Z
just tried a fresh install with the same route and see the same thing. Thought it could possibly be Laravel Valet but MAMP is the same.
Steven Grant
CC BY-SA 3.0
2017-04-14T13:11:47.690Z
@StevenGrant Sorry, rookie mistake. Just fixed the route example.
Brandon Kelly
CC BY-SA 3.0
2017-04-14T13:17:00.233Z
@BrandonKelly BOOM! I also had to tell Craft not to allow that section to have its own URLs. This will make for a solid blog post on gotchas :)
Steven Grant
CC BY-SA 3.0
2017-04-14T13:18:21.847Z
@StevenGrant Looking forward to it!
Brandon Kelly
CC BY-SA 3.0
2017-03-05T14:04:47.043Z
2017-04-14T13:11:26.540Z
2017-04-14T13:11:26.540Z
Brandon Kelly
<p>I'm using Craft as the backend for an app and VueJS along with Element API to deliver the content.</p>

<p>Everything so far is working sweet, except when I try to pull up the detail page for an entry because in Craft, the route doesn't exist.</p>

<p>To be clear, my main listing page and links work but if I try to visit <code>http://localhost/slug/id</code> directly, I get a 404.</p>

<p>I know within the context of something like Laravel, I could do</p>

<pre><code>Route::any('{all}', function () {
    return view('index');
})
-&gt;where(['all' =&gt; '.*']);
</code></pre>

<p>Is there something similar I could do with Craft?</p>

<p>I should add I have user registration and aspects that vue can't handle because Craft doesn't have a full crud api.</p>

<routes><routing>
Routing within a single page app integration
# Routing within a single page app integration

(Asked by: username_0 on 2017-03-04)

I'm using Craft as the backend for an app and VueJS along with Element API to deliver the content.
Everything so far is working sweet, except when I try to pull up the detail page for an entry because in Craft, the route doesn't exist.
To be clear, my main listing page and links work but if I try to visit http://localhost/slug/id directly, I get a 404.
I know within the context of something like Laravel, I could do
Route::any('{all}', function () {
    return view('index');
})
->where(['all' => '.*']);

Is there something similar I could do with Craft?
I should add I have user registration and aspects that vue can't handle because Craft doesn't have a full crud api.

**Tags:** routes, routing


---

## 3 answers

### Answer by username_3 on 2017-03-05. Score: 7 | Accepted answer

To pull this off, first you’ll have to make sure all of your Element API endpoints begin with something consistent, like api/ or data/, etc.
Then create a route in craft/config/routes.php that will match everything besides those Element API endpoints:
 'index'
);

'index' is the template path the requests should be routed to, so tweak that if needed.
If you have any other routes defined in there, make sure they go before this one.

I should add I have user registration and aspects that vue can't handle because Craft doesn't have a full crud api.

You can use the same controller actions the Control Panel uses. There are a few examples, including user registration at the bottom of the templating docs.
If you want to keep these handled by custom pages, you’ll need to add routes for them in routes.php, or else they will stop working due to that new catchall route. Craft only attempts its default behavior of matching the URI to a public template as a last resort; if a route matches the URI, that route will take precedence.

> **Comments:**
> **username_0**: ah, looks like that'll burst the Element API endpoints though, do I have any other options?  
> **username_0**: looks like the way around this is to do `post/(?P<slug>[^\/]+)\/(?P<number>\d+)` - ideally I'd like to drop `post` but this will do for now  
> **username_3**: @StevenGrant Ah, right. Just updated the route example to ignore Element API endpoints (assuming you can give all your endpoints a consistent prefix, e.g. `api/`).  
> **username_0**: Looks like I jumped the gun a little here. Despite having the route example you've given, I'm still managing to 404 when I try visit any URL other than the home page or the API endpoints.  
> **username_3**: Do you have an `index` template? (`index.html` or `index.twig`)  
> **username_4**: That has been my experience with route 404s too. After banging my head for a while, I find an error with the template I entered.  
> **username_0**: yeah, `index.twig` which works fine for the home page. Can't see any errors with the template either and given it works on home, should work for others.  
> **username_0**: just tried a fresh install with the same route and see the same thing. Thought it could possibly be Laravel Valet but MAMP is the same.  
> **username_3**: @StevenGrant Sorry, rookie mistake. Just fixed the route example.  
> **username_0**: @BrandonKelly BOOM! I also had to tell Craft not to allow that section to have its own URLs. This will make for a solid blog post on gotchas :)  
> **username_3**: @StevenGrant Looking forward to it!  

---

### Answer by username_1 on 2017-12-02. Score: 6

In case someone uses Craft 3, this should work:

`return array(
'<url:(?!api\/).*' => ['template' => 'index']
);`


---

### Answer by username_2 on 2019-08-12. Score: 2

Not sure why Davids solution doesn't work for me, I'm using the following (Craft 3.2.8):
return [
    '' => ['template' => 'index'],
];


---

