Search code examples
javascriptlaravellaravel-5riot.js

How to mount riot tags inside a laravel project

I need to add riot js to my laravel project and not sure I am doing the correct way to integrate riot for laravel project.

I have tried as follows in the blade.php file which is in the laravel views folder.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Laravel</title>

    <!-- Fonts -->
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,600"
        rel="stylesheet"
        type="text/css"
    />
    <script src="../js/riotcompiler.js" type="riot/tag"></script>
</head>
<body>
    <hello></hello>
    <script src="../tags/hello.tag" type="tag"></script>
    <script>
        riot.mount("hello");
    </script>
    njk
</body>
</html>

Then when I run the laravel project it will generate an exception saying riot is not defined. But I have already installed riot globally. So how can I fix this issue? Do I need to install riot through composer?

Solution

  • If you move js file to public/js folder you can call it in your blade file with:

    <script type="text/javascript" src="{{ URL::asset('js/riotcompiler.js') }}"></script>

    The function URL::asset()will produce the necessary url for you.