CODEWITHSUNDEEP
node.jsvue.jsvuetify.js
cce1911
cce1911

Reputation: 353

How to use Vuetify offline without webpack?

I'm building a simple web app that will run on a server that doesn't have internet access. This node app is built by hand and not using webpack. Vue works, but I can't seem to get Vuetify to work. I have installed vuetify and material-design-icons using npm. Here is my index.html file:

<html>
<head>
    <link rel="stylesheet" media="all" href="../node_modules/vuetify/dist/vuetify.min.css" type="text/css"/>
    <link rel="stylesheet" href='../node_modules/material-design-icons-iconfont/dist/material-design-icons.css' type="text/css">
    <script src="./scripts/vue.js"></script>
    <script src="../node_modules/vuetify/dist/vuetify.js"></script>
</head>
<body>
    <div id="app">
        <v-app id="inspire">
            <v-toolbar app>
                <v-toolbar-title>Title</v-toolbar-title>
            </v-toolbar>
            <v-content>
              <v-container>Hello world</v-container>
            </v-content>
          </v-app>
    </div>
</body>    
<script src="index.js"></script>
</html>

What am I missing?

Upvotes: 3

Views: 1764

Answers (1)

cce1911
cce1911

Reputation: 353

Just before I posted this question I figured out the answer. So here it is if anyone else is looking for the same thing.

I copied the .css and .js files to folders under my root directory and referenced them in the tag. I also copied the fonts folder from the material-design-icons-iconfont\dist\fonts folder into my styles folder.

<head>
    <link rel="stylesheet" media="all" href="./styles/vuetify.min.css" type="text/css"/>
    <link rel="stylesheet" href='./styles/material-design-icons.css' type="text/css">
    <script src="./scripts/vue.js"></script>
    <script src="./scripts/vuetify.js"></script>
</head>

Upvotes: 1

Related Questions